i creating small example show dynamic axes update button click. able update bars , axes y axis spacing , bar alignment not coming proper , somehow bars seem overlap choice "r". have tried number of things not able pin point issue. kindly me pin point issue.
this have done far , link dummy data:
<!doctype html> <meta charset="utf-8"> <style> /* set css */ path { stroke: steelblue; stroke-width: 2; fill: none; } .bar { fill: skyblue; } .axis path, .axis line { fill: none; stroke: grey; stroke-width: 1; shape-rendering: crispedges; } .buttons-container { width: 520px; margin-bottom: 25px; } .button { float: left; margin-left: 10px; font-weight: lighter; cursor: pointer; } .selected { font-weight: bold; } .top-label { font-size: 13px; font-style: italic; text-transform: uppercase; float: left; } .axis-label { text-anchor: middle; font-size: 13px; } .x.axis line { fill: none; stroke: #000; } .x.axis text { font-size: 13px; } .axis path { display:none; } .y.axis line { display:none; } </style> <body> <!-- load d3.js library --> <script src="http://d3js.org/d3.v4.min.js"></script> <script> // set dimensions of canvas / graph var margin = {top: 50, right: 50, bottom: 40, left: 50, padding: 5}, width = 960 - margin.left - margin.right, height = 700 - margin.top - margin.bottom; var area = "p"; var areas = ["p","q", "r"]; var x = d3.scalelinear() .range([0, width]); var y = d3.scaleband() .rangeround([0, height], 0.1); var xaxis = d3.axistop() .scale(x); var yaxis = d3.axisleft() .scale(y); var body = d3.select("body"); var buttons = body.append("div") .attr("class", "buttons-container") .selectall("div").data(areas) .enter().append("div") .text(function(d) { return d; }) .attr("class", function(d) { if(d == area) return "button selected"; else return "button"; }); function keys(d) { return d.subzone; } function render(){ // data d3.csv("data/dummy.csv", function(error, data) { data.foreach(function(d) { d.subzone = d.subzone; d.zone = d.zone; d.pop = +d.pop; }); data2= data.filter(function(element) {return element.zone == area}); console.log(data2); // scale range of data y.domain(data2.map(function(d){return d.subzone;})); x.domain([0, d3.max(data2, function(d) { return d.pop; })]); // adds svg canvas var svg = d3.select("body") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var bargroup = svg.append("g").attr("class", "bar") .attr("width",width) .attr("height", height); var bars = bargroup.selectall("rect").data(data2, keys) .enter().append("rect") .attr("x", 0) .attr("y",function(d){return y(d.subzone);}) .attr("width", function(d){return x(d.pop);}) .attr("height",y.bandwidth()-20 ) // add x axis svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xaxis); // add y axis svg.append("g") .attr("class", "y axis") .call(yaxis); buttons.on("click", function(zone) { d3.select(".selected") .classed("selected", false); d3.select(this) .classed("selected", true); area = zone; popdata = data.filter(function(element) {return element.zone == area}); y.domain(popdata.map(function(d){return d.subzone;})); x.domain([0, d3.max(popdata, function(d) { return d.pop; })]) console.log(popdata); var ba = bargroup.selectall("rect").data(popdata); ba.transition() .duration(500) .attr("width", function(d) { return x(d.pop); }); ba.enter().append("rect") .attr("x", 0) .attr("y",function(d){return y(d.subzone);}) .attr("width", function(d){return x(d.pop);}) .attr("height",y.bandwidth()-20 ); ba.exit().remove(); svg.select(".y.axis").transition().duration(1500).call(yaxis); svg.select(".x.axis").transition().duration(1500).call(xaxis); }); }); }; render(); </script> </body>
since using d3.js version 4, magic of implicitly merging enter() , update selections no longer applies. need change line:
ba.enter().append("rect") .attr("x", 0)
...to this:
ba.enter().append("rect").merge(ba).attr("x", 0)
see this plunker created debug/test. have "fixed" bar transitions - changing width in transition overriding without transition - note there no object constancy between bars, transition pretty. might better fade out exiting bars , fade in entering ones, , use data key make sure transitioning bars representing same data.
Comments
Post a Comment