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

Merge branch 'development' of https://github.com/novus/nvd3 into development

Browse Source 
Conflicts:
	nv.d3.js
	nv.d3.min.js
	src/models/multiBarHorizontalChart.js
master
frank shao 11 years ago
parent 8afe71bf76 200b20aad8
commit ccb051cf5e
6 changed files with 783 additions and 653 deletions
Show Stats Download Patch File Download Diff File

1189
nv.d3.js
View File

File diff suppressed because it is too large Load Diff

11
nv.d3.min.js vendored
View File

File diff suppressed because one or more lines are too long

10
src/models/historicalBarChart.js
Unescape Escape View File

@ -232,7 +232,7 @@ nv.models.historicalBarChart = function() {
// Event Handling/Dispatching (in chart's scope) // Event Handling/Dispatching (in chart's scope)
//------------------------------------------------------------ //------------------------------------------------------------
legend.dispatch.on('legendClick', function(d,i) { legend.dispatch.on('legendClick', function(d,i) {
d.disabled = !d.disabled; d.disabled = !d.disabled;
if (!data.filter(function(d) { return !d.disabled }).length) { if (!data.filter(function(d) { return !d.disabled }).length) {
@ -254,7 +254,7 @@ nv.models.historicalBarChart = function() {
data.forEach(function(d) { data.forEach(function(d) {
d.disabled = true; d.disabled = true;
}); });
d.disabled = false; d.disabled = false;
state.disabled = data.map(function(d) { return !!d.disabled }); state.disabled = data.map(function(d) { return !!d.disabled });
dispatch.stateChange(state); dispatch.stateChange(state);
@ -276,7 +276,7 @@ nv.models.historicalBarChart = function() {
state.disabled = e.disabled; state.disabled = e.disabled;
} }
selection.call(chart); chart.update();
}); });
//============================================================ //============================================================
@ -318,11 +318,11 @@ nv.models.historicalBarChart = function() {
chart.xAxis = xAxis; chart.xAxis = xAxis;
chart.yAxis = yAxis; chart.yAxis = yAxis;
d3.rebind(chart, bars, 'defined', 'isArea', 'x', 'y', 'size', 'xScale', 'yScale', d3.rebind(chart, bars, 'defined', 'isArea', 'x', 'y', 'size', 'xScale', 'yScale',
'xDomain', 'yDomain', 'xRange', 'yRange', 'forceX', 'forceY', 'interactive', 'clipEdge', 'clipVoronoi', 'id', 'interpolate','highlightPoint','clearHighlights', 'interactive'); 'xDomain', 'yDomain', 'xRange', 'yRange', 'forceX', 'forceY', 'interactive', 'clipEdge', 'clipVoronoi', 'id', 'interpolate','highlightPoint','clearHighlights', 'interactive');
chart.options = nv.utils.optionsFunc.bind(chart); chart.options = nv.utils.optionsFunc.bind(chart);
chart.margin = function(_) { chart.margin = function(_) {
if (!arguments.length) return margin; if (!arguments.length) return margin;
margin.top = typeof _.top != 'undefined' ? _.top : margin.top; margin.top = typeof _.top != 'undefined' ? _.top : margin.top;

23
src/models/multiBarHorizontal.js
Unescape Escape View File

@ -19,6 +19,7 @@ nv.models.multiBarHorizontal = function() {
, disabled // used in conjunction with barColor to communicate from multiBarHorizontalChart what series are disabled , disabled // used in conjunction with barColor to communicate from multiBarHorizontalChart what series are disabled
, stacked = false , stacked = false
, showValues = false , showValues = false
, showBarLabels = false
, valuePadding = 60 , valuePadding = 60
, valueFormat = d3.format(',.2f') , valueFormat = d3.format(',.2f')
, delay = 1200 , delay = 1200
@ -231,6 +232,21 @@ nv.models.multiBarHorizontal = function() {
bars.selectAll('text').text(''); bars.selectAll('text').text('');
} }
if (showBarLabels && !stacked) {
barsEnter.append('text').classed('nv-bar-label',true);
bars.select('text.nv-bar-label')
.attr('text-anchor', function(d,i) { return getY(d,i) < 0 ? 'start' : 'end' })
.attr('y', x.rangeBand() / (data.length * 2))
.attr('dy', '.32em')
.text(function(d,i) { return getX(d,i) });
bars.transition()
.select('text.nv-bar-label')
.attr('x', function(d,i) { return getY(d,i) < 0 ? y(0) - y(getY(d,i)) + 4 : -4 });
}
else {
bars.selectAll('text.nv-bar-label').text('');
}
bars bars
.attr('class', function(d,i) { return getY(d,i) < 0 ? 'nv-bar negative' : 'nv-bar positive'}) .attr('class', function(d,i) { return getY(d,i) < 0 ? 'nv-bar negative' : 'nv-bar positive'})
@ -405,6 +421,13 @@ nv.models.multiBarHorizontal = function() {
return chart; return chart;
}; };
chart.showBarLabels = function(_) {
if (!arguments.length) return showBarLabels;
showBarLabels = _;
return chart;
};
chart.valueFormat= function(_) { chart.valueFormat= function(_) {
if (!arguments.length) return valueFormat; if (!arguments.length) return valueFormat;
valueFormat = _; valueFormat = _;

61
src/models/multiBarHorizontalChart.js
Unescape Escape View File

@ -18,6 +18,8 @@ nv.models.multiBarHorizontalChart = function() {
, color = nv.utils.defaultColor() , color = nv.utils.defaultColor()
, showControls = true , showControls = true
, showLegend = true , showLegend = true
, showXAxis = true
, showYAxis = true
, stacked = false , stacked = false
, tooltips = true , tooltips = true
, tooltip = function(key, x, y, e, graph) { , tooltip = function(key, x, y, e, graph) {
@ -221,25 +223,33 @@ nv.models.multiBarHorizontalChart = function() {
//------------------------------------------------------------ //------------------------------------------------------------
// Setup Axes // Setup Axes
xAxis if (showXAxis) {
.scale(x) xAxis
.ticks( availableHeight / 24 ) .scale(x)
.tickSize(-availableWidth, 0); .ticks( availableHeight / 24 )
.tickSize(-availableWidth, 0);
g.select('.nv-x.nv-axis').transition() g.select('.nv-x.nv-axis').transition()
.call(xAxis); .call(xAxis);
var xTicks = g.select('.nv-x.nv-axis').selectAll('g'); var xTicks = g.select('.nv-x.nv-axis').selectAll('g');
yAxis xTicks
.scale(y) .selectAll('line, text')
.ticks( availableWidth / 100 ) .style('opacity', 1);
.tickSize( -availableHeight, 0); }
if (showYAxis) {
yAxis
.scale(y)
.ticks( availableWidth / 100 )
.tickSize( -availableHeight, 0);
g.select('.nv-y.nv-axis') g.select('.nv-y.nv-axis')
.attr('transform', 'translate(0,' + availableHeight + ')'); .attr('transform', 'translate(0,' + availableHeight + ')');
g.select('.nv-y.nv-axis').transition() g.select('.nv-y.nv-axis').transition()
.call(yAxis); .call(yAxis);
}
// Zero line // Zero line
g.select(".nv-zeroLine line") g.select(".nv-zeroLine line")
@ -257,7 +267,7 @@ nv.models.multiBarHorizontalChart = function() {
// Event Handling/Dispatching (in chart's scope) // Event Handling/Dispatching (in chart's scope)
//------------------------------------------------------------ //------------------------------------------------------------
legend.dispatch.on('stateChange', function(newState) { legend.dispatch.on('stateChange', function(newState) {
state = newState; state = newState;
dispatch.stateChange(state); dispatch.stateChange(state);
chart.update(); chart.update();
@ -306,7 +316,7 @@ nv.models.multiBarHorizontalChart = function() {
state.stacked = e.stacked; state.stacked = e.stacked;
} }
selection.call(chart); chart.update();
}); });
//============================================================ //============================================================
@ -347,10 +357,11 @@ nv.models.multiBarHorizontalChart = function() {
chart.xAxis = xAxis; chart.xAxis = xAxis;
chart.yAxis = yAxis; chart.yAxis = yAxis;
d3.rebind(chart, multibar, 'x', 'y', 'xDomain', 'yDomain', 'xRange', 'yRange', 'forceX', 'forceY', 'clipEdge', 'id', 'delay', 'showValues', 'valueFormat', 'stacked', 'barColor'); d3.rebind(chart, multibar, 'x', 'y', 'xDomain', 'yDomain', 'xRange', 'yRange', 'forceX', 'forceY',
'clipEdge', 'id', 'delay', 'showValues','showBarLabels', 'valueFormat', 'stacked', 'barColor');
chart.options = nv.utils.optionsFunc.bind(chart); chart.options = nv.utils.optionsFunc.bind(chart);
chart.margin = function(_) { chart.margin = function(_) {
if (!arguments.length) return margin; if (!arguments.length) return margin;
margin.top = typeof _.top != 'undefined' ? _.top : margin.top; margin.top = typeof _.top != 'undefined' ? _.top : margin.top;
@ -391,6 +402,18 @@ nv.models.multiBarHorizontalChart = function() {
return chart; return chart;
}; };
chart.showXAxis = function(_) {
if (!arguments.length) return showXAxis;
showXAxis = _;
return chart;
};
chart.showYAxis = function(_) {
if (!arguments.length) return showYAxis;
showYAxis = _;
return chart;
};
chart.tooltip = function(_) { chart.tooltip = function(_) {
if (!arguments.length) return tooltip; if (!arguments.length) return tooltip;
tooltip = _; tooltip = _;

142
src/models/pie.js
Unescape Escape View File

@ -48,9 +48,11 @@ nv.models.pie = function() {
var g = wrap.select('g'); var g = wrap.select('g');
gEnter.append('g').attr('class', 'nv-pie'); gEnter.append('g').attr('class', 'nv-pie');
gEnter.append('g').attr('class', 'nv-pieLabels');
wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
g.select('.nv-pie').attr('transform', 'translate(' + availableWidth / 2 + ',' + availableHeight / 2 + ')'); g.select('.nv-pie').attr('transform', 'translate(' + availableWidth / 2 + ',' + availableHeight / 2 + ')');
g.select('.nv-pieLabels').attr('transform', 'translate(' + availableWidth / 2 + ',' + availableHeight / 2 + ')');
//------------------------------------------------------------ //------------------------------------------------------------
@ -81,7 +83,11 @@ nv.models.pie = function() {
var slices = wrap.select('.nv-pie').selectAll('.nv-slice') var slices = wrap.select('.nv-pie').selectAll('.nv-slice')
.data(pie); .data(pie);
var pieLabels = wrap.select('.nv-pieLabels').selectAll('.nv-label')
.data(pie);
slices.exit().remove(); slices.exit().remove();
pieLabels.exit().remove();
var ae = slices.enter().append('g') var ae = slices.enter().append('g')
.attr('class', 'nv-slice') .attr('class', 'nv-slice')
@ -145,71 +151,84 @@ nv.models.pie = function() {
if (showLabels) { if (showLabels) {
// This does the normal label // This does the normal label
var labelsArc = d3.svg.arc().innerRadius(0); var labelsArc = d3.svg.arc().innerRadius(0);
if (pieLabelsOutside){ labelsArc = arc; } if (pieLabelsOutside){ labelsArc = arc; }
if (donutLabelsOutside) { labelsArc = d3.svg.arc().outerRadius(arc.outerRadius()); } if (donutLabelsOutside) { labelsArc = d3.svg.arc().outerRadius(arc.outerRadius()); }
ae.append("g").classed("nv-label", true) pieLabels.enter().append("g").classed("nv-label",true)
.each(function(d, i) { .each(function(d,i) {
var group = d3.select(this); var group = d3.select(this);
group group
.attr('transform', function(d) { .attr('transform', function(d) {
if (labelSunbeamLayout) { if (labelSunbeamLayout) {
d.outerRadius = arcRadius + 10; // Set Outer Coordinate d.outerRadius = arcRadius + 10; // Set Outer Coordinate
d.innerRadius = arcRadius + 15; // Set Inner Coordinate d.innerRadius = arcRadius + 15; // Set Inner Coordinate
var rotateAngle = (d.startAngle + d.endAngle) / 2 * (180 / Math.PI); var rotateAngle = (d.startAngle + d.endAngle) / 2 * (180 / Math.PI);
if ((d.startAngle+d.endAngle)/2 < Math.PI) { if ((d.startAngle+d.endAngle)/2 < Math.PI) {
rotateAngle -= 90; rotateAngle -= 90;
} else {
rotateAngle += 90;
}
return 'translate(' + labelsArc.centroid(d) + ') rotate(' + rotateAngle + ')';
} else { } else {
rotateAngle += 90; d.outerRadius = radius + 10; // Set Outer Coordinate
d.innerRadius = radius + 15; // Set Inner Coordinate
return 'translate(' + labelsArc.centroid(d) + ')'
} }
return 'translate(' + labelsArc.centroid(d) + ') rotate(' + rotateAngle + ')'; });
} else {
d.outerRadius = radius + 10; // Set Outer Coordinate
d.innerRadius = radius + 15; // Set Inner Coordinate
return 'translate(' + labelsArc.centroid(d) + ')'
}
});
group.append('rect')
.style('stroke', '#fff')
.style('fill', '#fff')
.attr("rx", 3)
.attr("ry", 3);
group.append('text') group.append('rect')
.style('text-anchor', labelSunbeamLayout ? ((d.startAngle + d.endAngle) / 2 < Math.PI ? 'start' : 'end') : 'middle') //center the text on it's origin or begin/end if orthogonal aligned .style('stroke', '#fff')
.style('fill', '#000') .style('fill', '#fff')
.attr("rx", 3)
.attr("ry", 3);
group.append('text')
.style('text-anchor', labelSunbeamLayout ? ((d.startAngle + d.endAngle) / 2 < Math.PI ? 'start' : 'end') : 'middle') //center the text on it's origin or begin/end if orthogonal aligned
.style('fill', '#000')
});
slices.select(".nv-label").transition()
.attr('transform', function(d) {
if (labelSunbeamLayout) {
d.outerRadius = arcRadius + 10; // Set Outer Coordinate
d.innerRadius = arcRadius + 15; // Set Inner Coordinate
var rotateAngle = (d.startAngle + d.endAngle) / 2 * (180 / Math.PI);
if ((d.startAngle+d.endAngle)/2 < Math.PI) {
rotateAngle -= 90;
} else {
rotateAngle += 90;
}
return 'translate(' + labelsArc.centroid(d) + ') rotate(' + rotateAngle + ')';
} else {
d.outerRadius = radius + 10; // Set Outer Coordinate
d.innerRadius = radius + 15; // Set Inner Coordinate
return 'translate(' + labelsArc.centroid(d) + ')'
}
}); });
slices.each(function(d, i) { var labelLocationHash = {};
var slice = d3.select(this); var avgHeight = 14;
var avgWidth = 140;
var createHashKey = function(coordinates) {
slice return Math.floor(coordinates[0]/avgWidth) * avgWidth + ',' + Math.floor(coordinates[1]/avgHeight) * avgHeight;
.select(".nv-label text") };
pieLabels.transition()
.attr('transform', function(d) {
if (labelSunbeamLayout) {
d.outerRadius = arcRadius + 10; // Set Outer Coordinate
d.innerRadius = arcRadius + 15; // Set Inner Coordinate
var rotateAngle = (d.startAngle + d.endAngle) / 2 * (180 / Math.PI);
if ((d.startAngle+d.endAngle)/2 < Math.PI) {
rotateAngle -= 90;
} else {
rotateAngle += 90;
}
return 'translate(' + labelsArc.centroid(d) + ') rotate(' + rotateAngle + ')';
} else {
d.outerRadius = radius + 10; // Set Outer Coordinate
d.innerRadius = radius + 15; // Set Inner Coordinate
/*
Overlapping pie labels are not good. What this attempts to do is, prevent overlapping.
Each label location is hashed, and if a hash collision occurs, we assume an overlap.
Adjust the label's y-position to remove the overlap.
*/
var center = labelsArc.centroid(d);
var hashKey = createHashKey(center);
if (labelLocationHash[hashKey]) {
center[1] -= avgHeight;
}
labelLocationHash[createHashKey(center)] = true;
return 'translate(' + center + ')'
}
});
pieLabels.select(".nv-label text")
.style('text-anchor', labelSunbeamLayout ? ((d.startAngle + d.endAngle) / 2 < Math.PI ? 'start' : 'end') : 'middle') //center the text on it's origin or begin/end if orthogonal aligned .style('text-anchor', labelSunbeamLayout ? ((d.startAngle + d.endAngle) / 2 < Math.PI ? 'start' : 'end') : 'middle') //center the text on it's origin or begin/end if orthogonal aligned
.text(function(d, i) { .text(function(d, i) {
var percent = (d.endAngle - d.startAngle) / (2 * Math.PI); var percent = (d.endAngle - d.startAngle) / (2 * Math.PI);
@ -220,15 +239,6 @@ nv.models.pie = function() {
}; };
return (d.value && percent > labelThreshold) ? labelTypes[labelType] : ''; return (d.value && percent > labelThreshold) ? labelTypes[labelType] : '';
}); });
var textBox = slice.select('text').node().getBBox();
slice.select(".nv-label rect")
.attr("width", textBox.width + 10)
.attr("height", textBox.height + 10)
.attr("transform", function() {
return "translate(" + [textBox.x - 5, textBox.y - 5] + ")";
});
});
} }
@ -307,7 +317,7 @@ nv.models.pie = function() {
getY = d3.functor(_); getY = d3.functor(_);
return chart; return chart;
}; };
chart.description = function(_) { chart.description = function(_) {
if (!arguments.length) return getDescription; if (!arguments.length) return getDescription;
getDescription = _; getDescription = _;
@ -319,7 +329,7 @@ nv.models.pie = function() {
showLabels = _; showLabels = _;
return chart; return chart;
}; };
chart.labelSunbeamLayout = function(_) { chart.labelSunbeamLayout = function(_) {
if (!arguments.length) return labelSunbeamLayout; if (!arguments.length) return labelSunbeamLayout;
labelSunbeamLayout = _; labelSunbeamLayout = _;
@ -331,7 +341,7 @@ nv.models.pie = function() {
donutLabelsOutside = _; donutLabelsOutside = _;
return chart; return chart;
}; };
chart.pieLabelsOutside = function(_) { chart.pieLabelsOutside = function(_) {
if (!arguments.length) return pieLabelsOutside; if (!arguments.length) return pieLabelsOutside;
pieLabelsOutside = _; pieLabelsOutside = _;
@ -350,7 +360,7 @@ nv.models.pie = function() {
donut = _; donut = _;
return chart; return chart;
}; };
chart.donutRatio = function(_) { chart.donutRatio = function(_) {
if (!arguments.length) return donutRatio; if (!arguments.length) return donutRatio;
donutRatio = _; donutRatio = _;

Write Preview
Loading…
Cancel
Save