diff --git a/examples/bar.html b/examples/bar.html
index 425a49c..f25e177 100644
--- a/examples/bar.html
+++ b/examples/bar.html
@@ -28,7 +28,7 @@ text {
},
{
label: "Two is also very long",
- y: null
+ y: 2
},
{
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
nv.addGraph({
generate: function() {
@@ -63,11 +91,19 @@ nv.addGraph({
.title("This is a sample chart title")
;
- d3.select("#test1")
- .attr('width', width)
- .attr('height', height)
- .datum(testdata)
- .call(chart);
+ if (td === 0) {
+ d3.select("#test1")
+ .attr('width', width)
+ .attr('height', height)
+ .datum(testdata)
+ .call(chart);
+ } else {
+ d3.select("#test1")
+ .attr('width', width)
+ .attr('height', height)
+ .datum(testdata2)
+ .call(chart);
+ }
return chart;
},
@@ -98,6 +134,23 @@ nv.addGraph({
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() {
var width = nv.utils.windowSize().width - 40,
height = nv.utils.windowSize().height - 40;
diff --git a/examples/pie.html b/examples/pie.html
index 3cad3db..b4b7b68 100644
--- a/examples/pie.html
+++ b/examples/pie.html
@@ -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({
generate: function() {
var width = nv.utils.windowSize().width - 40,
@@ -62,11 +90,19 @@ nv.addGraph({
.title('Hi this is the chart title')
;
+ if (td === 0) {
d3.select("#test1")
.attr('width', width)
.attr('height', height)
.datum(testdata)
.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();
});
+ 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('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() {
var width = nv.utils.windowSize().width - 40,
diff --git a/nv.d3.js b/nv.d3.js
index 6b6dfa2..12b474e 100644
--- a/nv.d3.js
+++ b/nv.d3.js
@@ -275,6 +275,7 @@ nv.models.bar = function() {
x .domain(data.map(function(d,i) { return d[label]; }))
.rangeRoundBands([0, width - margin.left - margin.right], .1);
+
var min = d3.min(data, function(d) { return d[field] });
var max = d3.max(data, function(d) { return d[field] });
var x0 = Math.max(-min, max);
@@ -301,7 +302,6 @@ nv.models.bar = function() {
});
-
var wrap = parent.selectAll('g.wrap').data([data]);
var gEnter = wrap.enter();
gEnter.append("text")
@@ -326,12 +326,15 @@ nv.models.bar = function() {
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){
d3.select(this).classed('hover', true);
dispatch.tooltipShow({
@@ -368,9 +371,9 @@ nv.models.bar = function() {
})
.on('dblclick', function(d,i) {
dispatch.elementDblClick({
- label: d.data[label],
- value: d.data[field],
- data: d.data,
+ label: d[label],
+ value: d[field],
+ data: d,
index: i,
pos: d3.event,
id: id
@@ -379,36 +382,16 @@ nv.models.bar = function() {
});
- barsEnter.append('rect')
- .attr('y', function(d) { return y(0); })
- .attr("fill", function(d, i) { return color(i); });
-
-
- 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()
+ bars
+ .attr('class', function(d) { return d[field] < 0 ? "bar negative" : "bar positive"})
+ .attr('transform', function(d,i) { return 'translate(' + x(d[label]) + ',0)'; })
.attr('width', x.rangeBand )
+ .order()
.transition()
.duration(animate)
- .attr('x', 0 )
- .attr('y', function(d) { return y(Math.max(0, d[field])) })
- .attr('height', function(d) { return Math.abs(y(d[field]) - y(0)); });
- // function(d) { return y.range()[0] - y(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)); });
-/* 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')
.attr('transform', 'translate(0,' + y.range()[0] + ')')
@@ -1814,16 +1797,7 @@ nv.models.pie = function() {
if (donut) arc.innerRadius(radius / 2);
-
- // 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
+ // Setup the Pie chart and choose the data element
var pie = d3.layout.pie()
.value(function (d) { return d[field]; });
@@ -1832,8 +1806,6 @@ nv.models.pie = function() {
slices.exit().remove();
-
-
var ae = slices.enter().append("svg:g")
.attr("class", "slice")
.on('mouseover', function(d,i){
@@ -1881,24 +1853,34 @@ nv.models.pie = function() {
d3.event.stopPropagation();
});
+ var paths = ae.append("svg:path")
+ .attr('class','path')
+ .attr("fill", function(d, i) { return color(i); });
+ //.attr('d', arc);
-
- var paths = ae.append("svg:path")
- .attr("fill", function(d, i) { return color(i); })
- .attr('d', arc);
+ slices.select('.path')
+ .attr('d', arc)
+ .transition()
+ .ease("bounce")
+ .duration(animate)
+ .attrTween("d", tweenPie);
if (showLabels) {
- // This does the normal label
- ae.append("text")
- .attr("transform", function(d) {
- d.outerRadius = radius + 10; // Set Outer Coordinate
- d.innerRadius = radius + 15; // Set Inner Coordinate
- return "translate(" + arc.centroid(d) + ")";
- })
- .attr("text-anchor", "middle") //center the text on it's origin
- .style("font", "bold 12px Arial")
- //.attr("fill", function(d, i) { return color(i); })
- .text(function(d, i) { return d.data[label]; });
+ // This does the normal label
+ ae.append("text");
+
+ slices.select("text")
+ .transition()
+ .duration(animate)
+ .ease('bounce')
+ .attr("transform", function(d) {
+ d.outerRadius = radius + 10; // Set Outer Coordinate
+ d.innerRadius = radius + 15; // Set Inner Coordinate
+ 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;
}
- // Animation
- paths.transition()
- .ease("bounce")
- .duration(animate)
- .attrTween("d", tweenPie);
diff --git a/src/d3.css b/src/d3.css
index a1f0983..fbe2d9d 100644
--- a/src/d3.css
+++ b/src/d3.css
@@ -21,6 +21,7 @@
background-color: rgba(255,255,255,1);
padding: 10px;
border: 1px solid #ddd;
+ z-index: 10000;
font-family: Arial;
font-size: 13px;
diff --git a/src/models/bar.js b/src/models/bar.js
index ccb1a7a..5724569 100644
--- a/src/models/bar.js
+++ b/src/models/bar.js
@@ -24,6 +24,7 @@ nv.models.bar = function() {
x .domain(data.map(function(d,i) { return d[label]; }))
.rangeRoundBands([0, width - margin.left - margin.right], .1);
+
var min = d3.min(data, function(d) { return d[field] });
var max = d3.max(data, function(d) { return d[field] });
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();
gEnter.append("text")
.attr("class", "title")
@@ -75,12 +75,15 @@ nv.models.bar = function() {
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){
d3.select(this).classed('hover', true);
dispatch.tooltipShow({
@@ -117,9 +120,9 @@ nv.models.bar = function() {
})
.on('dblclick', function(d,i) {
dispatch.elementDblClick({
- label: d.data[label],
- value: d.data[field],
- data: d.data,
+ label: d[label],
+ value: d[field],
+ data: d,
index: i,
pos: d3.event,
id: id
@@ -128,36 +131,16 @@ nv.models.bar = function() {
});
- barsEnter.append('rect')
- .attr('y', function(d) { return y(0); })
- .attr("fill", function(d, i) { return color(i); });
-
-
- 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()
+ bars
+ .attr('class', function(d) { return d[field] < 0 ? "bar negative" : "bar positive"})
+ .attr('transform', function(d,i) { return 'translate(' + x(d[label]) + ',0)'; })
.attr('width', x.rangeBand )
+ .order()
.transition()
.duration(animate)
- .attr('x', 0 )
- .attr('y', function(d) { return y(Math.max(0, d[field])) })
- .attr('height', function(d) { return Math.abs(y(d[field]) - y(0)); });
- // function(d) { return y.range()[0] - y(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)); });
-/* 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')
.attr('transform', 'translate(0,' + y.range()[0] + ')')
diff --git a/src/models/pie.js b/src/models/pie.js
index 4590adf..7c2f785 100644
--- a/src/models/pie.js
+++ b/src/models/pie.js
@@ -74,16 +74,7 @@ nv.models.pie = function() {
if (donut) arc.innerRadius(radius / 2);
-
- // 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
+ // Setup the Pie chart and choose the data element
var pie = d3.layout.pie()
.value(function (d) { return d[field]; });
@@ -92,8 +83,6 @@ nv.models.pie = function() {
slices.exit().remove();
-
-
var ae = slices.enter().append("svg:g")
.attr("class", "slice")
.on('mouseover', function(d,i){
@@ -141,24 +130,34 @@ nv.models.pie = function() {
d3.event.stopPropagation();
});
+ var paths = ae.append("svg:path")
+ .attr('class','path')
+ .attr("fill", function(d, i) { return color(i); });
+ //.attr('d', arc);
-
- var paths = ae.append("svg:path")
- .attr("fill", function(d, i) { return color(i); })
- .attr('d', arc);
+ slices.select('.path')
+ .attr('d', arc)
+ .transition()
+ .ease("bounce")
+ .duration(animate)
+ .attrTween("d", tweenPie);
if (showLabels) {
- // This does the normal label
- ae.append("text")
- .attr("transform", function(d) {
- d.outerRadius = radius + 10; // Set Outer Coordinate
- d.innerRadius = radius + 15; // Set Inner Coordinate
- return "translate(" + arc.centroid(d) + ")";
- })
- .attr("text-anchor", "middle") //center the text on it's origin
- .style("font", "bold 12px Arial")
- //.attr("fill", function(d, i) { return color(i); })
- .text(function(d, i) { return d.data[label]; });
+ // This does the normal label
+ ae.append("text");
+
+ slices.select("text")
+ .transition()
+ .duration(animate)
+ .ease('bounce')
+ .attr("transform", function(d) {
+ d.outerRadius = radius + 10; // Set Outer Coordinate
+ d.innerRadius = radius + 15; // Set Inner Coordinate
+ 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;
}
- // Animation
- paths.transition()
- .ease("bounce")
- .duration(animate)
- .attrTween("d", tweenPie);