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

您必须移除轴（或文本）并再次绘制它，就像移除条形并再次绘制它们以更新轴上的数据一样。检查working plnkr here。

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;
}
}
)};

D3更新数据但不更新轴

1 个答案: