D3棒グラフがy軸とx軸を正しく動的に更新しない

Question

jsonデータセットから棒グラフを動的に更新しようとしています。

データは次のようになり：

[{X = A、Y = 1}、{X = B、Y = 2}、{Xの=のC、Y = 4}]、
[{Xを

私はコードを使ってキャンバスの寸法を設定しました（y軸とx（x、y）= 0.1） γ軸）：

var margin = {top: 20, right: 20, bottom: 70, left: 40}, 
    width = 600 - margin.left - margin.right, 
    height = 300 - margin.top - margin.bottom; 

全体コード：

// set the ranges 
    var x = d3.scale.ordinal().rangeRoundBands([0, width], .05); 

    var y = d3.scale.linear().range([height, 0]); 

    // define the axis 
    var xAxis = d3.svg.axis() 
     .scale(x) 
     .orient("bottom") 


    var yAxis = d3.svg.axis() 
     .scale(y) 
     .orient("left") 
     .ticks(10); 


    // add the SVG element 
    var chart = d3.select(".chart") 
     .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 
     .append("g") 
     .attr("transform", 
       "translate(" + margin.left + "," + margin.top + ")"); 






    // load the data 
     data=mydata 

     data.forEach(function(d) { 
      d.x = d.x; 
      d.y = +d.y; 
     }); 

     // scale the range of the data 
     x.domain(data.map(function(d) { return d.x; })); 
     y.domain([0, d3.max(data, function(d) { return d.y; })]); 

     // add axis 
     chart.append("g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + height + ")") 
      .call(xAxis) 
     .selectAll("text") 
      .style("text-anchor", "end") 
      .attr("dx", "-.8em") 
      .attr("dy", "-.55em") 
      .attr("transform", "rotate(-90)"); 

     chart.append("g") 
      .attr("class", "y axis") 
      .call(yAxis) 
     .append("text") 
      .attr("transform", "rotate(-90)") 
      .attr("y", 5) 
      .attr("dy", ".71em") 
      .style("text-anchor", "end") 
      .text("Frequency"); 


     // Add bar chart 
     chart.selectAll("bar") 
      .data(data) 
     .enter().append("rect") 
      .attr("class", "bar") 
      .attr("x", function(d) { return x(d.x); }) 
      .attr("width", x.rangeBand()) 
      .attr("y", function(d) { return y(d.y); }) 
      .attr("height", function(d) { return height - y(d.y); }); 


    //Call function to update barchart 
     function redraw(data){ 


      x.domain(data.map(function(d) { return d.x; })); 
      y.domain([0, d3.max(data, function(d) { return d.y; })]); 

      chart.select(".x.axis").remove(); 
     chart.append("g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + height + ")") 
      .call(xAxis) 
     .selectAll("text") 
      .style("text-anchor", "end") 
      .attr("dx", "-.8em") 
      .attr("dy", "-.55em") 
      .attr("transform", "rotate(-90)"); 



      // y-axis 
      chart.select(".y.axis").remove(); 
      chart.append("g") 
        .attr("class", "y axis") 
        .call(yAxis) 
       .append("text") 
       .attr("transform", "rotate(-90)") 
       .attr("y", 6) 
       .attr("dy", ".71em") 
       .style("text-anchor", "end") 
       .text("Frequency"); 





      var bar = chart.selectAll(".bar") 
        .data(data, function(d) { 

         return d.x; }); 

      // new data: 
      bar.enter().append("rect") 
       .attr("class", "bar") 
       .attr("x", function(d) { return x(d.x); }) 
       .attr("y", function(d) { return y(d.y); }) 
       .attr("height", function(d) { return height - y(d.y); }) 
       .attr("width", x.rangeBand()); 


      // removed data: 
      // bar.exit().remove(); 
      chart.select(".y.axis").transition().delay(750).call(yAxis) 

      // updated data: 
      bar 
       .transition() 
       .duration(750) 
        .attr("y", function(d) { return y(d.y); }) 
        .attr("height", function(d) { return height - y(d.y); }); 
     } 

Answer 1

この場合、xAxisとyAxisは、宣言を関数スコープにコピーすることで、関数で定義した新しいスケール値を使用するように再定義する必要があります。

// define the axis 
var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom") 


var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left") 
    .ticks(10); 

あなたは「は.call（X軸）」を呼び出すときに、関数の内部でその軸宣言に関連付けられたXスケールはオリジナルのものであるので、あなたが軸上の古い値を取得している主な理由です。

希望します。