blob42
/
nvd3
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Scatter now use's d3's symbol to use different shapes, changed css, points on line charts are now completely hidden untill hover.

Browse Source
master-patched
Bob Monteverde 12 years ago
parent 9e54787e40
commit 34850d6c54
7 changed files with 127 additions and 34 deletions
Show Stats Download Patch File Download Diff File

2
examples/bullet.html
Unescape Escape View File

@ -44,7 +44,7 @@ var chart = nv.models.bullet()
var vis = d3.select("#chart").selectAll("svg")
.data(data)
.enter().append("svg")
.attr("class", "bullet")
.attr("class", "bullet nvd3")
.attr("width", width)
.attr("height", height)
.append("g")

55
nv.d3.js
Unescape Escape View File

@ -2442,8 +2442,8 @@ nv.models.line = function() {
var scatter = nv.models.scatter()
.id(id)
.size(2.5) // default size
.sizeDomain([2.5]), //set to speed up calculation, needs to be unset if there is a cstom size accessor
.size(16) // default size
.sizeDomain([16,256]), //set to speed up calculation, needs to be unset if there is a cstom size accessor
x = scatter.xScale(),
y = scatter.yScale(),
x0 = x,
@ -2516,6 +2516,7 @@ nv.models.line = function() {
var paths = groups.selectAll('path')
.data(function(d, i) { return [d.values] });
paths.enter().append('path')
.attr('class', 'line')
.attr('d', d3.svg.line()
.x(function(d,i) { return x0(getX(d,i)) })
.y(function(d,i) { return y0(getY(d,i)) })
@ -5250,10 +5251,12 @@ nv.models.scatter = function() {
width = 960,
height = 500,
color = d3.scale.category20().range(), // array of colors to be used in order
shape = 'circle',
id = Math.floor(Math.random() * 100000), //Create semi-unique ID incase user doesn't selet one
x = d3.scale.linear(),
y = d3.scale.linear(),
z = d3.scale.sqrt(), //sqrt because point size is done by area, not radius
z = d3.scale.linear(), //linear because d3.svg.shape.size is treated as area
//z = d3.scale.sqrt(), //sqrt because point size is done by area, not radius
getX = function(d) { return d.x }, // accessor to get the x value from a data point
getY = function(d) { return d.y }, // accessor to get the y value from a data point
getSize = function(d) { return d.size }, // accessor to get the point radius from a data point //TODO: consider renamig size to z
@ -5308,7 +5311,8 @@ nv.models.scatter = function() {
.range([availableHeight, 0]);
z .domain(sizeDomain || d3.extent(d3.merge(seriesData).map(function(d) { return d.size }).concat(forceSize)))
.range([2, 10]);
.range([16, 256]);
//.range([2, 10]);
@ -5423,7 +5427,7 @@ nv.models.scatter = function() {
});
dispatch.on('elementMouseout.point', function(d) {
wrap.select('.series-' + d.seriesIndex + ' circle.point-' + d.pointIndex)
wrap.select('.series-' + d.seriesIndex + ' .point-' + d.pointIndex)
.classed('hover', false);
});
@ -5451,6 +5455,7 @@ nv.models.scatter = function() {
.style('fill-opacity', .5);
/*
var points = groups.selectAll('circle.point')
.data(function(d) { return d.values });
points.enter().append('circle')
@ -5468,6 +5473,38 @@ nv.models.scatter = function() {
.attr('cx', function(d,i) { return x(getX(d,i)) })
.attr('cy', function(d,i) { return y(getY(d,i)) })
.attr('r', function(d,i) { return z(getSize(d,i)) });
*/
var points = groups.selectAll('path.point')
.data(function(d) { return d.values });
points.enter().append('path')
.attr('transform', function(d,i) {
return 'translate(' + x0(getX(d,i)) + ',' + y0(getY(d,i)) + ')'
})
.attr('d',
d3.svg.symbol()
.type(function(d,i) { return d.shape || shape })
.size(function(d,i) { return z(getSize(d,i)) })
);
//.attr('r', function(d,i) { return z0(getSize(d,i)) });
//d3.transition(points.exit())
d3.transition(groups.exit().selectAll('path.point'))
.attr('transform', function(d,i) {
return 'translate(' + x(getX(d,i)) + ',' + y(getY(d,i)) + ')'
})
//.attr('r', function(d,i) { return z(getSize(d,i)) })
.remove();
points.attr('class', function(d,i) { return 'point point-' + i });
d3.transition(points)
.attr('transform', function(d,i) {
return 'translate(' + x(getX(d,i)) + ',' + y(getY(d,i)) + ')'
})
.attr('d',
d3.svg.symbol()
.type(function(d,i) { return d.shape || shape })
.size(function(d,i) { return z(getSize(d,i)) })
);
//.attr('r', function(d,i) { return z(getSize(d,i)) });
@ -5607,6 +5644,12 @@ nv.models.scatter = function() {
return chart;
};
chart.shape= function(_) {
if (!arguments.length) return shape;
shape = _;
return chart;
};
chart.id = function(_) {
if (!arguments.length) return id;
id = _;
@ -5869,7 +5912,7 @@ nv.models.scatterChart = function() {
chart.xAxis = xAxis;
chart.yAxis = yAxis;
d3.rebind(chart, scatter, 'interactive', 'size', 'xScale', 'yScale', 'zScale', 'xDomain', 'yDomain', 'sizeDomain', 'forceX', 'forceY', 'forceSize', 'clipVoronoi', 'clipRadius');
d3.rebind(chart, scatter, 'interactive', 'shape', 'size', 'xScale', 'yScale', 'zScale', 'xDomain', 'yDomain', 'sizeDomain', 'forceX', 'forceY', 'forceSize', 'clipVoronoi', 'clipRadius');
chart.margin = function(_) {

6
nv.d3.min.js vendored
View File

File diff suppressed because one or more lines are too long

43
src/d3.css
Unescape Escape View File

@ -219,7 +219,7 @@ svg .title {
* Lines
*/
.nvd3 .groups path {
.nvd3 .groups path.line {
fill: none;
stroke-width: 2.5px;
stroke-linecap: round;
@ -240,10 +240,17 @@ svg .title {
stroke-width: 6px;
}
.nvd3.line .nvd3.scatter .groups circle.point {
/*
.nvd3.scatter .groups .point {
fill-opacity: 0.1;
stroke-opacity: 0.1;
}
*/
.nvd3.line .nvd3.scatter .groups .point {
fill-opacity: 0;
stroke-opacity: 0;
}
.nvd3 .groups .point {
@ -252,11 +259,11 @@ svg .title {
-webkit-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
}
.nvd3.line .nvd3.scatter .groups circle.point.hover,
.nvd3.scatter .groups .point.hover,
.nvd3 .groups .point.hover {
stroke-width: 20px;
fill-opacity: .5;
stroke-opacity: .5;
fill-opacity: .5 !important;
stroke-opacity: .5 !important;
}
@ -363,19 +370,19 @@ svg .title {
* Bullet
*/
.nvd3 .bullet { font: 10px sans-serif; cursor: pointer; }
.nvd3 .bullet rect { fill-opacity: .6; }
.nvd3 .bullet rect:hover { fill-opacity: 1; }
.nvd3 .bullet .marker { stroke: #000; stroke-width: 2px; }
.nvd3 .bullet .markerTriangle { stroke: #000; fill: #fff; stroke-width: 1.5px; }
.nvd3 .bullet .tick line { stroke: #666; stroke-width: .5px; }
.nvd3 .bullet .range.s0 { fill: #eee; }
.nvd3 .bullet .range.s1 { fill: #ddd; }
.nvd3 .bullet .range.s2 { fill: #ccc; }
.nvd3 .bullet .measure.s0 { fill: steelblue; }
.nvd3 .bullet .measure.s1 { fill: darkblue; }
.nvd3 .bullet .title { font-size: 14px; font-weight: bold; }
.nvd3 .bullet .subtitle { fill: #999; }
.nvd3.bullet { font: 10px sans-serif; cursor: pointer; }
.nvd3.bullet rect { fill-opacity: .6; }
.nvd3.bullet rect:hover { fill-opacity: 1; }
.nvd3.bullet .marker { stroke: #000; stroke-width: 2px; }
.nvd3.bullet .markerTriangle { stroke: #000; fill: #fff; stroke-width: 1.5px; }
.nvd3.bullet .tick line { stroke: #666; stroke-width: .5px; }
.nvd3.bullet .range.s0 { fill: #eee; }
.nvd3.bullet .range.s1 { fill: #ddd; }
.nvd3.bullet .range.s2 { fill: #ccc; }
.nvd3.bullet .measure.s0 { fill: steelblue; }
.nvd3.bullet .measure.s1 { fill: darkblue; }
.nvd3.bullet .title { font-size: 14px; font-weight: bold; }
.nvd3.bullet .subtitle { fill: #999; }

5
src/models/line.js
Unescape Escape View File

@ -13,8 +13,8 @@ nv.models.line = function() {
var scatter = nv.models.scatter()
.id(id)
.size(2.5) // default size
.sizeDomain([2.5]), //set to speed up calculation, needs to be unset if there is a cstom size accessor
.size(16) // default size
.sizeDomain([16,256]), //set to speed up calculation, needs to be unset if there is a cstom size accessor
x = scatter.xScale(),
y = scatter.yScale(),
x0 = x,
@ -87,6 +87,7 @@ nv.models.line = function() {
var paths = groups.selectAll('path')
.data(function(d, i) { return [d.values] });
paths.enter().append('path')
.attr('class', 'line')
.attr('d', d3.svg.line()
.x(function(d,i) { return x0(getX(d,i)) })
.y(function(d,i) { return y0(getY(d,i)) })

48
src/models/scatter.js
Unescape Escape View File

@ -5,10 +5,12 @@ nv.models.scatter = function() {
width = 960,
height = 500,
color = d3.scale.category20().range(), // array of colors to be used in order
shape = 'circle',
id = Math.floor(Math.random() * 100000), //Create semi-unique ID incase user doesn't selet one
x = d3.scale.linear(),
y = d3.scale.linear(),
z = d3.scale.sqrt(), //sqrt because point size is done by area, not radius
z = d3.scale.linear(), //linear because d3.svg.shape.size is treated as area
//z = d3.scale.sqrt(), //sqrt because point size is done by area, not radius
getX = function(d) { return d.x }, // accessor to get the x value from a data point
getY = function(d) { return d.y }, // accessor to get the y value from a data point
getSize = function(d) { return d.size }, // accessor to get the point radius from a data point //TODO: consider renamig size to z
@ -63,7 +65,8 @@ nv.models.scatter = function() {
.range([availableHeight, 0]);
z .domain(sizeDomain || d3.extent(d3.merge(seriesData).map(function(d) { return d.size }).concat(forceSize)))
.range([2, 10]);
.range([16, 256]);
//.range([2, 10]);
@ -178,7 +181,7 @@ nv.models.scatter = function() {
});
dispatch.on('elementMouseout.point', function(d) {
wrap.select('.series-' + d.seriesIndex + ' circle.point-' + d.pointIndex)
wrap.select('.series-' + d.seriesIndex + ' .point-' + d.pointIndex)
.classed('hover', false);
});
@ -206,6 +209,7 @@ nv.models.scatter = function() {
.style('fill-opacity', .5);
/*
var points = groups.selectAll('circle.point')
.data(function(d) { return d.values });
points.enter().append('circle')
@ -223,6 +227,38 @@ nv.models.scatter = function() {
.attr('cx', function(d,i) { return x(getX(d,i)) })
.attr('cy', function(d,i) { return y(getY(d,i)) })
.attr('r', function(d,i) { return z(getSize(d,i)) });
*/
var points = groups.selectAll('path.point')
.data(function(d) { return d.values });
points.enter().append('path')
.attr('transform', function(d,i) {
return 'translate(' + x0(getX(d,i)) + ',' + y0(getY(d,i)) + ')'
})
.attr('d',
d3.svg.symbol()
.type(function(d,i) { return d.shape || shape })
.size(function(d,i) { return z(getSize(d,i)) })
);
//.attr('r', function(d,i) { return z0(getSize(d,i)) });
//d3.transition(points.exit())
d3.transition(groups.exit().selectAll('path.point'))
.attr('transform', function(d,i) {
return 'translate(' + x(getX(d,i)) + ',' + y(getY(d,i)) + ')'
})
//.attr('r', function(d,i) { return z(getSize(d,i)) })
.remove();
points.attr('class', function(d,i) { return 'point point-' + i });
d3.transition(points)
.attr('transform', function(d,i) {
return 'translate(' + x(getX(d,i)) + ',' + y(getY(d,i)) + ')'
})
.attr('d',
d3.svg.symbol()
.type(function(d,i) { return d.shape || shape })
.size(function(d,i) { return z(getSize(d,i)) })
);
//.attr('r', function(d,i) { return z(getSize(d,i)) });
@ -362,6 +398,12 @@ nv.models.scatter = function() {
return chart;
};
chart.shape= function(_) {
if (!arguments.length) return shape;
shape = _;
return chart;
};
chart.id = function(_) {
if (!arguments.length) return id;
id = _;

2
src/models/scatterChart.js
Unescape Escape View File

@ -251,7 +251,7 @@ nv.models.scatterChart = function() {
chart.xAxis = xAxis;
chart.yAxis = yAxis;
d3.rebind(chart, scatter, 'interactive', 'size', 'xScale', 'yScale', 'zScale', 'xDomain', 'yDomain', 'sizeDomain', 'forceX', 'forceY', 'forceSize', 'clipVoronoi', 'clipRadius');
d3.rebind(chart, scatter, 'interactive', 'shape', 'size', 'xScale', 'yScale', 'zScale', 'xDomain', 'yDomain', 'sizeDomain', 'forceX', 'forceY', 'forceSize', 'clipVoronoi', 'clipRadius');
chart.margin = function(_) {

Write Preview
Loading…
Cancel
Save