javascript - maintaing object constancy in transistioning donut chart -
i'm new d3 getting there.
i'm having trouble maintaining object constancy differently-sized datasets. have set here. (i'm having trouble jsfiddle work)
the initial chart has 3 arcs. when click on segment arc updates new data (using nested function) , supposed return 4 data elements 4 corresponding arcs. can see it's returning 3 arcs. best way , simplest way work corrcetly shows 4 segemnts?
i have seen http://bl.ocks.org/mbostock/5681842. using nested function rollup function.
here csv file ( simplified version, not necessary).
status,dept,city,points temp,finance,new york,33 contract,hr,london,12 contract,hr,new york,11 casual,shop,london,43 temp,sales,new york,14 contract,shop,paris,51 temp,finance,london,7 contract,office,new york,61 contract,shop,london,31 temp,office,new york,16 contract,office,london,19 temp,finance,london,7 contract,office,new york,61 contract,sales,london,31 temp,finance,new york,16 contract,sales,paris,19 temp,sales,new york,11 here d3 script. in advance
var data1 var data2 var datax var width = 960, height = 500, radius = math.min(width, height) / 2; var color = d3.scale.ordinal() .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); var arc = d3.svg.arc() .outerradius(radius - 10) .innerradius(radius - 70); var pie = d3.layout.pie() .sort(null) .value(function(d) { return d.values; }); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); svg.style("cursor","pointer") d3.csv("data4.csv", function(error, data) { datax=data var data1 = d3.nest() .key(function(d) { return d.city ; }) .rollup(function(d) { return d3.sum(d, function(g) { return g.points; }); }).entries(data); var path = svg.selectall("path") .data(pie(data1)) .enter() .append("path") .attr("class", "arc"); path.on("click", function() { data2=datax change(data2) }) path.transition() .duration(500) .attr("fill", function(d, i) { return color(d.data.key ); }) .attr("d", arc) .each(function(d) { this._current = d; }) function arctween(a) { var = d3.interpolate(this._current, a); this._current = i(0); return function(t) { return arc(i(t)); }; } function change(data) { data = data.filter(function(d) { return d.city == "new york"; }); var data = d3.nest() .key(function(d) { return d.dept; }) .rollup(function(d) { return d3.sum(d, function(g) { return g.points; }); }).entries(data); path.data(pie(data)); path.transition().duration(750).attrtween("d", arctween); // redraw arcs } });
one strategy transition update selection (the object returned .data()), , add enter selection (the object returned .enter()) after synchronised delay...
var datax var data1 var enteranticlockwise = { startangle: math.pi * 2, endangle: math.pi * 2 }; var width = 960, height = 500, radius = math.min(width, height) / 2; var color = d3.scale.ordinal() .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); var arc = d3.svg.arc() .outerradius(radius - 10) .innerradius(radius - 70); var pie = d3.layout.pie() .sort(null) .value(function (d) { return d.values; }); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); svg.style("cursor", "pointer") d3.csv("data4.csv", function (error, data) { datax = data //data1=data // data = data.filter(function(d) { return d.city == "new york"; }); var data1 = d3.nest() .key(function (d) { return d.city; }) .rollup(function (d) { return d3.sum(d, function (g) { return g.points; }); }).entries(data); var path = render(data1) path.on("click", function () { data2 = datax render(change(data2)); }) function arctween(a) { var = d3.interpolate(this._current, a); this._current = i(0); return function (t) { return arc(i(t)); }; } function change(data) { data = data.filter(function (d) { return d.city == "new york"; }); var newdata = d3.nest() .key(function (d) { return d.dept; }) .rollup(function (d) { return d3.sum(d, function (g) { return g.points; }); }).entries(data); return newdata } function render(data) { var path = svg.datum(data).selectall("path").data(pie) path.transition().duration(750).attrtween("d", arctween); // redraw arcs path.enter() .append("path") .attr("class", "arc") .transition().duration(0).delay(750) .attr("fill", function (d, i) { return color(d.data.key); }) .attr("d", arc) .each(function (d) { this._current = d; }) return path; } }); (this technique based on this example, added delay , adapted example nailing piece of wood...)
the ultimate strategy perhaps create 0 pie slices in layout transition 0 on enter...
var enteranticlockwise = { startangle: math.pi * 2, endangle: math.pi * 2 }; var width = window.innerwidth, height = window.innerheight - 20, radius = math.min(width, height) / 2 * 0.8; var color = d3.scale.ordinal() .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); var arc = d3.svg.arc() .outerradius(radius) .innerradius(radius - 20); var pie = d3.layout.pie() .sort(null) .value(function (d) { return d.values; }); pie.zero = pie([{ values: 1 }, { values: 0 }])[1]; //zero pie slice var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); svg.style("cursor", "pointer") d3.csv("data4u.csv", function (error, data) { data = data || d3.csv.parse(d3.select("#csv").text()) var data1 = d3.nest() .key(function (d) { return d.city; }) .rollup(function (d) { return d3.sum(d, function (g) { return g.points; }); }).entries(data), path = render(data1); path.on("click", function () { render(change(data)); }); function arctween(a) { var = d3.interpolate(this._current, a); this._current = i(0); return function (t) { return arc(i(t)); }; }; function change(data) { data = data.filter(function (d) { return d.city == "new york"; }); var newdata = d3.nest() .key(function (d) { return d.dept; }) .rollup(function (d) { return d3.sum(d, function (g) { return g.points; }); }).entries(data); return newdata } function render(data) { var path = svg.datum(data).selectall("path").data(pie) var enter = path.enter(); enter.append("path") .attr("class", "arc") .attr("fill", function (d, i) { return color(d.data.key); }) .attr("d", function (d, i) { this._current = pie.zero; return arc(pie.zero); }); path.transition().duration(1500).attrtween("d", arctween); // redraw arcs return path; } });#csv { display: none; } svg { padding: 0; margin: 0;}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <div id="csv">status,dept,city,points temp,finance,new york,33 contract,hr,london,12 contract,hr,new york,11 casual,shop,london,43 temp,sales,new york,14 contract,shop,paris,51 temp,finance,london,7 contract,office,new york,61 contract,shop,london,31 temp,office,new york,16 contract,office,london,19 temp,finance,london,7 contract,office,new york,61 contract,sales,london,31 temp,finance,new york,16 contract,sales,paris,19 temp,sales,new york,11 </div>
Comments
Post a Comment