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

Fix for Bar/Pie chart not showing updated data...

Browse Source
master-patched
Nathanael Anderson 12 years ago
parent a37fa26fb6
commit 61313ade5d
6 changed files with 201 additions and 141 deletions
Show Stats Download Patch File Download Diff File

65
examples/bar.html
Unescape Escape View File

@ -28,7 +28,7 @@ text {
}, },
{ {
label: "Two is also very long", label: "Two is also very long",
y: null y: 2
}, },
{ {
label: "Three", label: "Three",
@ -48,6 +48,34 @@ text {
} }
]; ];
var testdata2 = [
{
label: "One is a very long",
y: 1
},
{
label: "Two is also very long",
y: 12
},
{
label: "Three",
y: -9
},
{
label: "Four",
y: 4
},
{
label: "Five",
y: 6
}
];
var td = 0;
var a = (Math.random()*10)+1;
if (a > 5) td = 1;
//Format A //Format A
nv.addGraph({ nv.addGraph({
generate: function() { generate: function() {
@ -63,11 +91,19 @@ nv.addGraph({
.title("This is a sample chart title") .title("This is a sample chart title")
; ;
d3.select("#test1") if (td === 0) {
.attr('width', width) d3.select("#test1")
.attr('height', height) .attr('width', width)
.datum(testdata) .attr('height', height)
.call(chart); .datum(testdata)
.call(chart);
} else {
d3.select("#test1")
.attr('width', width)
.attr('height', height)
.datum(testdata2)
.call(chart);
}
return chart; return chart;
}, },
@ -98,6 +134,23 @@ nv.addGraph({
console.log("Chart Click",e); console.log("Chart Click",e);
}); });
graph.dispatch.on('chartClick', function(e) {
console.log('Click Switching to');
if (td === 0) {
d3.select("#test1")
.datum(testdata2)
.call(graph);
td = 1;
} else {
d3.select("#test1")
.datum(testdata)
.call(graph);
td = 0;
}
});
window.onresize = function() { window.onresize = function() {
var width = nv.utils.windowSize().width - 40, var width = nv.utils.windowSize().width - 40,
height = nv.utils.windowSize().height - 40; height = nv.utils.windowSize().height - 40;

56
examples/pie.html
Unescape Escape View File

@ -48,7 +48,35 @@ text {
} }
]; ];
//Format A var testdata2 = [
{
label: "One",
y: 10
},
{
label: "Two",
y: 5
},
{
label: "Three",
y: 3
},
{
label: "Four",
y: 7
},
{
label: "Five",
y: 2
}
];
var td = 0;
var a = (Math.random()*10)+1;
if (a > 5) td = 1;
//Format A
nv.addGraph({ nv.addGraph({
generate: function() { generate: function() {
var width = nv.utils.windowSize().width - 40, var width = nv.utils.windowSize().width - 40,
@ -62,11 +90,19 @@ nv.addGraph({
.title('Hi this is the chart title') .title('Hi this is the chart title')
; ;
if (td === 0) {
d3.select("#test1") d3.select("#test1")
.attr('width', width) .attr('width', width)
.attr('height', height) .attr('height', height)
.datum(testdata) .datum(testdata)
.call(chart); .call(chart);
} else {
d3.select("#test1")
.attr('width', width)
.attr('height', height)
.datum(testdata2)
.call(chart);
}
@ -91,9 +127,25 @@ nv.addGraph({
nv.tooltip.cleanup(); nv.tooltip.cleanup();
}); });
graph.dispatch.on('chartClick', function(e) {
console.log('Click Switching to');
if (td === 0) {
d3.select("#test1")
.datum(testdata2)
.call(graph);
td = 1;
} else {
d3.select("#test1")
.datum(testdata)
.call(graph);
td = 0;
}
});
graph.dispatch.on('elementClick', function(e) { console.log("Clicked on Element",e); }); graph.dispatch.on('elementClick', function(e) { console.log("Clicked on Element",e); });
graph.dispatch.on('elementDblClick', function(e) { console.log("Double Clicked on Element",e); }); graph.dispatch.on('elementDblClick', function(e) { console.log("Double Clicked on Element",e); });
graph.dispatch.on('chartClick', function(e) { console.log("Clicked on chart",e); }); //graph.dispatch.on('chartClick', function(e) { console.log("Clicked on chart",e); });
window.onresize = function() { window.onresize = function() {
var width = nv.utils.windowSize().width - 40, var width = nv.utils.windowSize().width - 40,

109
nv.d3.js
Unescape Escape View File

@ -275,6 +275,7 @@ nv.models.bar = function() {
x .domain(data.map(function(d,i) { return d[label]; })) x .domain(data.map(function(d,i) { return d[label]; }))
.rangeRoundBands([0, width - margin.left - margin.right], .1); .rangeRoundBands([0, width - margin.left - margin.right], .1);
var min = d3.min(data, function(d) { return d[field] }); var min = d3.min(data, function(d) { return d[field] });
var max = d3.max(data, function(d) { return d[field] }); var max = d3.max(data, function(d) { return d[field] });
var x0 = Math.max(-min, max); var x0 = Math.max(-min, max);
@ -301,7 +302,6 @@ nv.models.bar = function() {
}); });
var wrap = parent.selectAll('g.wrap').data([data]); var wrap = parent.selectAll('g.wrap').data([data]);
var gEnter = wrap.enter(); var gEnter = wrap.enter();
gEnter.append("text") gEnter.append("text")
@ -326,12 +326,15 @@ nv.models.bar = function() {
var bars = wrap.select('.bars').selectAll('.bar') var bars = wrap.select('.bars').selectAll('.bar')
.data(function(d) { return d }); .data(function(d) { return d; });
bars.exit().remove();
bars.exit().remove();
var barsEnter = bars.enter().append('g') var barsEnter = bars.enter().append('svg:rect')
.attr("class", function(d, i) { return d[field] < 0 ? "bar negative" : "bar positive"; }) .attr('class', function(d) { return d[field] < 0 ? "bar negative" : "bar positive"})
.attr("fill", function(d, i) { return color(i); })
.attr('x', 0 )
.on('mouseover', function(d,i){ .on('mouseover', function(d,i){
d3.select(this).classed('hover', true); d3.select(this).classed('hover', true);
dispatch.tooltipShow({ dispatch.tooltipShow({
@ -368,9 +371,9 @@ nv.models.bar = function() {
}) })
.on('dblclick', function(d,i) { .on('dblclick', function(d,i) {
dispatch.elementDblClick({ dispatch.elementDblClick({
label: d.data[label], label: d[label],
value: d.data[field], value: d[field],
data: d.data, data: d,
index: i, index: i,
pos: d3.event, pos: d3.event,
id: id id: id
@ -379,36 +382,16 @@ nv.models.bar = function() {
}); });
barsEnter.append('rect') bars
.attr('y', function(d) { return y(0); }) .attr('class', function(d) { return d[field] < 0 ? "bar negative" : "bar positive"})
.attr("fill", function(d, i) { return color(i); }); .attr('transform', function(d,i) { return 'translate(' + x(d[label]) + ',0)'; })
barsEnter.append('text')
.attr('text-anchor', 'middle')
.attr('dy', '-4px');
bars
.attr('transform', function(d,i) { return 'translate(' + x(d[label]) + ',0)'; });
bars.selectAll('rect')
.order()
.attr('width', x.rangeBand ) .attr('width', x.rangeBand )
.order()
.transition() .transition()
.duration(animate) .duration(animate)
.attr('x', 0 ) .attr('y', function(d) { return y(Math.max(0, d[field])); })
.attr('y', function(d) { return y(Math.max(0, d[field])) }) .attr('height', function(d) { return Math.abs(y(d[field]) - y(0)); });
.attr('height', function(d) { return Math.abs(y(d[field]) - y(0)); });
// function(d) { return y.range()[0] - y(d[field]) });
/* if (hasLabel) {
bars.selectAll('text')
.attr('x', 0 )
.attr('y', function(d) { return y(d[field]) })
.attr('dx', x.rangeBand() / 2)
.text(function(d) { return d[field] });
} */
g.select('.x.axis') g.select('.x.axis')
.attr('transform', 'translate(0,' + y.range()[0] + ')') .attr('transform', 'translate(0,' + y.range()[0] + ')')
@ -1814,16 +1797,7 @@ nv.models.pie = function() {
if (donut) arc.innerRadius(radius / 2); if (donut) arc.innerRadius(radius / 2);
// Setup the Pie chart and choose the data element
// TODO: figure a better way to remove old chart on a redraw
if (lastWidth != width || lastHeight != height) {
background.select('.pie').selectAll(".slice").remove();
lastWidth = width;
lastHeight = height;
}
// Setup the Pie chart and choose the data element
var pie = d3.layout.pie() var pie = d3.layout.pie()
.value(function (d) { return d[field]; }); .value(function (d) { return d[field]; });
@ -1832,8 +1806,6 @@ nv.models.pie = function() {
slices.exit().remove(); slices.exit().remove();
var ae = slices.enter().append("svg:g") var ae = slices.enter().append("svg:g")
.attr("class", "slice") .attr("class", "slice")
.on('mouseover', function(d,i){ .on('mouseover', function(d,i){
@ -1881,24 +1853,34 @@ nv.models.pie = function() {
d3.event.stopPropagation(); d3.event.stopPropagation();
}); });
var paths = ae.append("svg:path")
.attr('class','path')
.attr("fill", function(d, i) { return color(i); });
//.attr('d', arc);
slices.select('.path')
var paths = ae.append("svg:path") .attr('d', arc)
.attr("fill", function(d, i) { return color(i); }) .transition()
.attr('d', arc); .ease("bounce")
.duration(animate)
.attrTween("d", tweenPie);
if (showLabels) { if (showLabels) {
// This does the normal label // This does the normal label
ae.append("text") ae.append("text");
.attr("transform", function(d) {
d.outerRadius = radius + 10; // Set Outer Coordinate slices.select("text")
d.innerRadius = radius + 15; // Set Inner Coordinate .transition()
return "translate(" + arc.centroid(d) + ")"; .duration(animate)
}) .ease('bounce')
.attr("text-anchor", "middle") //center the text on it's origin .attr("transform", function(d) {
.style("font", "bold 12px Arial") d.outerRadius = radius + 10; // Set Outer Coordinate
//.attr("fill", function(d, i) { return color(i); }) d.innerRadius = radius + 15; // Set Inner Coordinate
.text(function(d, i) { return d.data[label]; }); return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle") //center the text on it's origin
.style("font", "bold 12px Arial")
.text(function(d, i) { return d.data[label]; });
} }
@ -1908,11 +1890,6 @@ nv.models.pie = function() {
return a > 90 ? a - 180 : a; return a > 90 ? a - 180 : a;
} }
// Animation
paths.transition()
.ease("bounce")
.duration(animate)
.attrTween("d", tweenPie);

1
src/d3.css
Unescape Escape View File

@ -21,6 +21,7 @@
background-color: rgba(255,255,255,1); background-color: rgba(255,255,255,1);
padding: 10px; padding: 10px;
border: 1px solid #ddd; border: 1px solid #ddd;
z-index: 10000;
font-family: Arial; font-family: Arial;
font-size: 13px; font-size: 13px;

53
src/models/bar.js
Unescape Escape View File

@ -24,6 +24,7 @@ nv.models.bar = function() {
x .domain(data.map(function(d,i) { return d[label]; })) x .domain(data.map(function(d,i) { return d[label]; }))
.rangeRoundBands([0, width - margin.left - margin.right], .1); .rangeRoundBands([0, width - margin.left - margin.right], .1);
var min = d3.min(data, function(d) { return d[field] }); var min = d3.min(data, function(d) { return d[field] });
var max = d3.max(data, function(d) { return d[field] }); var max = d3.max(data, function(d) { return d[field] });
var x0 = Math.max(-min, max); var x0 = Math.max(-min, max);
@ -50,8 +51,7 @@ nv.models.bar = function() {
}); });
var wrap = parent.selectAll('g.wrap').data([data]);
var wrap = parent.selectAll('g.wrap').data([data]);
var gEnter = wrap.enter(); var gEnter = wrap.enter();
gEnter.append("text") gEnter.append("text")
.attr("class", "title") .attr("class", "title")
@ -75,12 +75,15 @@ nv.models.bar = function() {
var bars = wrap.select('.bars').selectAll('.bar') var bars = wrap.select('.bars').selectAll('.bar')
.data(function(d) { return d }); .data(function(d) { return d; });
bars.exit().remove(); bars.exit().remove();
var barsEnter = bars.enter().append('g')
.attr("class", function(d, i) { return d[field] < 0 ? "bar negative" : "bar positive"; }) var barsEnter = bars.enter().append('svg:rect')
.attr('class', function(d) { return d[field] < 0 ? "bar negative" : "bar positive"})
.attr("fill", function(d, i) { return color(i); })
.attr('x', 0 )
.on('mouseover', function(d,i){ .on('mouseover', function(d,i){
d3.select(this).classed('hover', true); d3.select(this).classed('hover', true);
dispatch.tooltipShow({ dispatch.tooltipShow({
@ -117,9 +120,9 @@ nv.models.bar = function() {
}) })
.on('dblclick', function(d,i) { .on('dblclick', function(d,i) {
dispatch.elementDblClick({ dispatch.elementDblClick({
label: d.data[label], label: d[label],
value: d.data[field], value: d[field],
data: d.data, data: d,
index: i, index: i,
pos: d3.event, pos: d3.event,
id: id id: id
@ -128,36 +131,16 @@ nv.models.bar = function() {
}); });
barsEnter.append('rect') bars
.attr('y', function(d) { return y(0); }) .attr('class', function(d) { return d[field] < 0 ? "bar negative" : "bar positive"})
.attr("fill", function(d, i) { return color(i); }); .attr('transform', function(d,i) { return 'translate(' + x(d[label]) + ',0)'; })
barsEnter.append('text')
.attr('text-anchor', 'middle')
.attr('dy', '-4px');
bars
.attr('transform', function(d,i) { return 'translate(' + x(d[label]) + ',0)'; });
bars.selectAll('rect')
.order()
.attr('width', x.rangeBand ) .attr('width', x.rangeBand )
.order()
.transition() .transition()
.duration(animate) .duration(animate)
.attr('x', 0 ) .attr('y', function(d) { return y(Math.max(0, d[field])); })
.attr('y', function(d) { return y(Math.max(0, d[field])) }) .attr('height', function(d) { return Math.abs(y(d[field]) - y(0)); });
.attr('height', function(d) { return Math.abs(y(d[field]) - y(0)); });
// function(d) { return y.range()[0] - y(d[field]) });
/* if (hasLabel) {
bars.selectAll('text')
.attr('x', 0 )
.attr('y', function(d) { return y(d[field]) })
.attr('dx', x.rangeBand() / 2)
.text(function(d) { return d[field] });
} */
g.select('.x.axis') g.select('.x.axis')
.attr('transform', 'translate(0,' + y.range()[0] + ')') .attr('transform', 'translate(0,' + y.range()[0] + ')')

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

@ -74,16 +74,7 @@ nv.models.pie = function() {
if (donut) arc.innerRadius(radius / 2); if (donut) arc.innerRadius(radius / 2);
// Setup the Pie chart and choose the data element
// TODO: figure a better way to remove old chart on a redraw
if (lastWidth != width || lastHeight != height) {
background.select('.pie').selectAll(".slice").remove();
lastWidth = width;
lastHeight = height;
}
// Setup the Pie chart and choose the data element
var pie = d3.layout.pie() var pie = d3.layout.pie()
.value(function (d) { return d[field]; }); .value(function (d) { return d[field]; });
@ -92,8 +83,6 @@ nv.models.pie = function() {
slices.exit().remove(); slices.exit().remove();
var ae = slices.enter().append("svg:g") var ae = slices.enter().append("svg:g")
.attr("class", "slice") .attr("class", "slice")
.on('mouseover', function(d,i){ .on('mouseover', function(d,i){
@ -141,24 +130,34 @@ nv.models.pie = function() {
d3.event.stopPropagation(); d3.event.stopPropagation();
}); });
var paths = ae.append("svg:path")
.attr('class','path')
.attr("fill", function(d, i) { return color(i); });
//.attr('d', arc);
slices.select('.path')
var paths = ae.append("svg:path") .attr('d', arc)
.attr("fill", function(d, i) { return color(i); }) .transition()
.attr('d', arc); .ease("bounce")
.duration(animate)
.attrTween("d", tweenPie);
if (showLabels) { if (showLabels) {
// This does the normal label // This does the normal label
ae.append("text") ae.append("text");
.attr("transform", function(d) {
d.outerRadius = radius + 10; // Set Outer Coordinate slices.select("text")
d.innerRadius = radius + 15; // Set Inner Coordinate .transition()
return "translate(" + arc.centroid(d) + ")"; .duration(animate)
}) .ease('bounce')
.attr("text-anchor", "middle") //center the text on it's origin .attr("transform", function(d) {
.style("font", "bold 12px Arial") d.outerRadius = radius + 10; // Set Outer Coordinate
//.attr("fill", function(d, i) { return color(i); }) d.innerRadius = radius + 15; // Set Inner Coordinate
.text(function(d, i) { return d.data[label]; }); return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle") //center the text on it's origin
.style("font", "bold 12px Arial")
.text(function(d, i) { return d.data[label]; });
} }
@ -168,11 +167,6 @@ nv.models.pie = function() {
return a > 90 ? a - 180 : a; return a > 90 ? a - 180 : a;
} }
// Animation
paths.transition()
.ease("bounce")
.duration(animate)
.attrTween("d", tweenPie);

Write Preview
Loading…
Cancel
Save