D3饼图更新后未计算新路径值

Question

我有一个非常简单的数据结构，我希望根据同一对象中的不同键/值对更新 D3 圆环图。这是数据：

var data = [
    {
        id: 1,
        name: 'Bernie Sanders',
        name2: 'Jesus Christ',
        color: '#0362ad',
        state: 3.55,
        national: 4.88
    },
    {
        id: 2,
        name: 'Donald Trump',
        name2: 'Miley Cyrus',
        color: '#f0a611',
        state: 1.36,
        national: 2.65
    }
]

我正在通过以下方式设置我的饼图：

var pie = d3.layout.pie()
    .sort(null)
    .value( function(d) { return d.state });

var arc = d3.svg.arc()
    .outerRadius(radius - 30)
    .innerRadius(radius - 80);

var paths = chart.selectAll('g')
    .data(pie(data), function(d) { return d.data.id })
    .enter()
    .append('g')
    .attr('class', 'arc')
    .attr('transform', 'translate(' + (radius - margin.left) + ',' + (radius - margin.top) + ')');

var arcs = paths.append('path')
    .attr('d', arc)
    .style('fill', function(d) { return d.data.color; });

我有一个update() 函数，我试图在其中更改圆环图值以显示national 值而不是state 值。

// "which" is equal to 'state' or 'national'
function update(which) {

    // change location of values
    pie.value( function(d) { return d[which] );

    // compute new angles
    paths.data(pie(data));

    // update arcs
    arcs.attr('d', arc);
};

我的弧没有正确更新，当我将它们记录到控制台时，__data__ 属性仍然显示初始化属性 (d.state) 的值和角度。

如何正确计算每条弧的新路径？

Answer 1

您需要像这样处理路径的转换场景：

(function() {

  var data = [{
    id: 1,
    name: 'Bernie Sanders',
    name2: 'Jesus Christ',
    color: '#0362ad',
    state: 3.55,
    national: 4.88
  }, {
    id: 2,
    name: 'Donald Trump',
    name2: 'Miley Cyrus',
    color: '#f0a611',
    state: 1.36,
    national: 2.65
  }]

  var svgElement = $("#piechart");
  var width = svgElement.width();
  var height = svgElement.height();
  var radius = Math.min(width, height) / 2;

  var chart = d3.select("#piechart");

  var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) {
      return d.state
    });

  var arc = d3.svg.arc()
    .outerRadius(radius - 30)
    .innerRadius(radius - 80);

  chart.append('g')
    .attr('class', 'arc')
    .attr('transform', 'translate(' + (radius) + ',' + (radius) + ')');

  var paths = chart.select('g').selectAll('path')
    .data(pie(data), function(d) {
      return d.data.id
    });

  paths.enter()
    .append('path')
    .attr('d', arc)
    .style('fill', function(d) {
      return d.data.color;
    })

  // which is equal to 'state' or 'national'
  function update(which) {

    pie.value(function(d) {
        return d[which]
      });

    paths.data(pie(data), function(d) {
        return d.data.id
      });

    paths.transition()      
      .duration(1000)
      .attr('d', arc)
      .style('fill', function(d) {
        return d.data.color;
      });

  };

  $("#stateButton").click(function() {
    update("state");
  });
  $("#nationalButton").click(function() {
    update("national");
  });

})()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<button id="stateButton">State</button>
<button id="nationalButton">National</button>
<svg id="piechart"></svg>