D3更新數據但不更新軸

Question

我正在D3中創建一個交互式條形圖。 按下按鈕后，數據將更改。

這是條形圖的簡化代碼：

<svg class="cex"></svg>
<script>
var margin = {top: 20, right: 20, bottom: 60, left: 35},
    width = 650 - margin.left - margin.right,
    height =  300- margin.top - margin.bottom;

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .2);

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

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .outerTickSize(0)
    .orient("left");

  var cex = d3.select(".cex")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv("/input.csv", function(error, data) {
  x.domain(data.map(function(d) { return d.City; }));
  y.domain([0, d3.max(data, function(d) { return d.EatIn; })]);

  cex.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
      .selectAll("text")
      .attr("y", 0)
      .attr("x", 9)
      .attr("dy", ".35em")
      .attr("transform", "rotate(60)")
      .style("text-anchor", "start");;

  cex.append("g")
      .attr("class", "y axis")
      .call(yAxis);

  var bar=cex.selectAll(".bar")
    .data(data)
    .enter()
    .append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.City); })
      .attr("y", function(d) { return y(d.EatIn); })
      .attr("height", function(d) { return height - y(d.EatIn); })
      .attr("width", x.rangeBand());

});
function type(d) {
  d.EatIn = +d.EatIn;
  return d;
}

選擇按鈕后，將運行以下更新代碼：

function EatOutData() {
        d3.csv("/input.csv", function(error, data) {
          x.domain(data.map(function(d) { return d.City; }));
          y.domain([0, d3.max(data, function(d) { return d.EatOut; })]);
        var sel = cex.selectAll("rect")
             .data(data);
        sel.exit().remove();
        sel.enter().append("rect")
          sel.attr("class", "bar")
          sel.attr("x", function(d) { return x(d.City); })
          sel.attr("y", function(d) { return y(d.EatOut); })
          sel.attr("height", function(d) { return height - y(d.EatOut); })
          sel.attr("width", x.rangeBand());

             sel.selectAll("g.y.axis")
              .call(yAxis);

            sel.selectAll("g.x.axis")
              .call(xAxis);
  function type(d) {
  d.EatOut = +d.EatOut;
  return d;
}
  }
    )};

更新將更改Y變量。 因此，條形的高度會發生變化，但軸不會發生變化，並且兩個變量的比例也大不相同。

還有其他一些SO帖子，但似乎沒有一個適合我。 我不確定為什么更新中的y.domain不能調整它們。 非常感謝任何建議。

Answer 1

您將必須刪除軸（或文本）並再次繪制它，就像要刪除條並再次繪制它們以更新軸上的數據一樣。 在此處檢查工作的plnkr 。

function EatOutData() {

    d3.csv("input2.csv", function(error, data) {

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


    var sel = cex.selectAll("rect")
         .data(data);
    sel.exit().remove();
    d3.select(".x.axis").remove();

    sel.enter().append("rect")
      sel.attr("class", "bar")
      sel.attr("x", function(d) { return x(d.City); })
      sel.attr("y", function(d) { return y(d.EatOut); })
      sel.attr("height", function(d) { return height - y(d.EatOut); })


      sel.attr("width", x.rangeBand());

    cex.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
    .selectAll("text")
    .attr("y", 0)
    .attr("x", 9)
    .attr("dy", ".35em")
    .attr("transform", "rotate(60)")
    .style("text-anchor", "start");;


         sel.selectAll("g.y.axis")
          .call(yAxis);

        sel.selectAll("g.x.axis")
          .call(xAxis);
function type(d) {
d.EatOut = +d.EatOut;
return d;
}
}
)};