Question

我修改了Mike Bostock的Pie Chart Update III，以便使用两个元素和一个csv文件为每个图表获得两个不同的饼图。

var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);

var leftG = svg.append("g")
              .attr("transform", "translate(" + width / 4 + "," + height / 2 + ")");

var rightG = svg.append("g")
                .attr("transform", "translate(" + 3 * (width / 4) + "," + height / 2 + ")");

我想让每个单选按钮更新两个饼图。现在我的问题是更新输入只会改变第二个饼图。

我无法弄清楚如何执行此操作，因为change（）函数位于d3.csv（）函数内部，而且无法访问另一个函数。

  d3.selectAll("input")
  .on("change", changeLeft);

  function changeLeft() {
    var value = this.value;
    pieLeft.value(function(d) { return d[value]; }); // change the value function
    pathLeft = pathLeft.data(pieLeft); // compute the new angles
    pathLeft.transition().duration(750).attrTween("d", arcTween); // redraw the arcs
  }

提前致谢。

编辑：这是我的plnkr

Answer 1

声明一个全局变量

var changeLeft;

用以下功能替换您的功能，它将起作用：

 changeLeft = function() {
        var value = this.value;
        pieLeft.value(function(d) { return d[value]; }); // change the value function
        pathLeft = pathLeft.data(pieLeft); // compute the new angles
        pathLeft.transition().duration(750).attrTween("d", arcTween); // redraw the arcs
      }

仅使用一个输入d3.js

1 个答案: