javascript - D3 update data on the wrong bars -
i want update data on click bars changing not right ones. there cant quite fix select. on click grey bars, should bar2 updating. should bar.
example: https://jsfiddle.net/monduiz/kaqv37gu/
d3 chart:
var values = feature.properties; var data = [ {name:"employment rate",value:values["erate15p"]}, {name:"participation rate",value:values["pr15p"]}, {name:"unemployment rate",value:values["urate15p"]} ]; var margin = {top: 70, right: 50, bottom: 20, left: 50}, width = 400 - margin.left - margin.right, height = 270 - margin.top - margin.bottom, barheight = height / data.length; // scale x axis var x = d3.scale.linear() .domain([0, 100]) //set input scale of 0 - 1. index has score scale of 0 1. makes bars more accurate comparison. .range([0, width]); var y = d3.scale.ordinal() .domain(["employment rate", "participation rate", "unemployment rate"]) .rangeroundbands([0, height], 0.2); var svg = d3.select(div).select("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")") .classed("chartind", true); var bar2 = svg.selectall("g.bar") .data(data) .enter() .append("g") .attr("transform", function(d, i) { return "translate(0," + * barheight + ")"; }); var bar = svg.selectall("g.bar") .data(data) .enter() .append("g") .attr("transform", function(d, i) { return "translate(0," + * barheight + ")"; }); bar2.append("rect") .attr("height", y.rangeband()-15) .attr("fill", "#ededed") .attr("width", 300); bar.append("rect") .attr("height", y.rangeband()-15) .attr("fill", "#b44978") .attr("width", function(d){return x(d.value);}); bar.append("text") .attr("class", "text") .attr("x", 298) .attr("y", y.rangeband() - 50) .text(function(d) { return d.value + " %"; }) .attr("fill", "black") .attr("text-anchor", "end"); bar.append("text") .attr("class", "text") .attr("x", function(d) { return x(d.name) -5 ; }) .attr("y", y.rangeband()-50) //.attr("dy", ".35em") .text(function(d) { return d.name; }); d3.select("p") .on("click", function() { //new values dataset var values = feature.properties; var dataset = [ {name:"employment rate",value:values["erate15_24"]}, {name:"participation rate",value:values["pr15_24"]}, {name:"unemployment rate",value:values["urate15_24"]} ]; //update rects var bar = svg.selectall("rect") .data(dataset) .attr("x", function(d){return x(d.value);}) .attr("width", function(d){return x(d.value);}) }); }
var bar2 = svg.selectall("g.bar") .data(data) .enter() .append("g") .attr("transform", function(d, i) { return "translate(0," + * barheight + ")"; }); var bar = svg.selectall("g.bar") .data(data) .enter() .append("g") .attr("transform", function(d, i) { return "translate(0," + * barheight + ")"; }); 'bar2' above generates 3 new g elements (one each datum)
since don't set attr("class","bar") these 'bar' generate 3 new g elements - (if had set class attribute bar return empty no new elements generated , you'd see missing stuff)
further on add rects these g elements 6 rectangles in total , in click function select these rectangles , re-attach 3 fresh bits of data
since bar2 added first rectangles in g elements hoovering new data
you need select , set different classes on g elements, .selectall("g.bar") , .attr("class", "bar") bar, , .selectall("g.bar2") , .attr("class", "bar2") bar2 (use same name keep simple)
then in new data need select rects belonging g elements of bar class: svg.selectall(".bar rect")
another way have 1 set of g elements , add 2 types of rectangle (differentiated class attribute)
Comments
Post a Comment