javascript - D3 updating x-y axes -


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