Javascript D3圆环图：如何在两个对象数据集之间交替？

我正在建立一个D3甜甜圈图表，它应该根据无线电输入在两个数据集之间振荡。我正在尝试修改

我的数据集相当简单：

var dataTotal = [
  {key: "BURGLARY", values: 2054},
  {key: "MOTOR VEHICLE THEFT", values: 1891},
  {key: "THEFT/LARCENY", values: 8849},
  {key: "VANDALISM", values: 242},
  {key: "VEHICLE BREAK-IN/THEFT", values: 5128}
];
var dataDistrict = [
  {key: "BURGLARY", values: 221},
  {key: "MOTOR VEHICLE THEFT", values: 135},
  {key: "THEFT/LARCENY", values: 2485},
  {key: "VANDALISM", values: 31},
  {key: "VEHICLE BREAK-IN/THEFT", values: 581}
];

问题的根源似乎在于需要修改示例以避免使用

d3.tsv

。我的实现将显示一个圆环图，但我无法在数据集之间转换

var width = 960,
    height = 500,
    radius = Math.min(width, height) / 2;

var color = d3.scale.category20();

var pie = d3.layout.pie()
    .value(function(d) { return d.values; })
    .sort(null);
// console.log(pie);

var arc = d3.svg.arc()
    .innerRadius(radius - 100)
    .outerRadius(radius - 20);

var donutChart = d3.select(".donutChart")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var path = donutChart.datum(dataTotal).selectAll("path")
    .data(pie)
  .enter().append("path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", arc)
    .each(function(d) { this._current = d; }); // store the initial angles

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

var timeout = setTimeout(function() {
  d3.select("input[value=\"dataDistrict\"]").property("checked", true).each(change);
}, 2000);

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

// Store the displayed angles in _current.
// Then, interpolate from _current to the new angles.
// During the transition, _current is updated in-place by d3.interpolate.
function arcTween(a) {
  var i = d3.interpolate(this._current, a);
  this._current = i(0);
  return function(t) {
    return arc(i(t));
  };
}

---

我的猜测是，我的两个数组和示例TSV之间的数据结构差异导致了问题，但无论我如何修改数据，都没有任何效果：//

定义数据集数组，如下所示：

  var dataTotal = [{
    key: "BURGLARY",
    values: 2054
  }, {
    key: "MOTOR VEHICLE THEFT",
    values: 1891
  }, {
    key: "THEFT/LARCENY",
    values: 8849
  }, {
    key: "VANDALISM",
    values: 242
  }, {
    key: "VEHICLE BREAK-IN/THEFT",
    values: 5128
  }];
  var dataDistrict = [{
    key: "BURGLARY",
    values: 221
  }, {
    key: "MOTOR VEHICLE THEFT",
    values: 135
  }, {
    key: "THEFT/LARCENY",
    values: 2485
  }, {
    key: "VANDALISM",
    values: 31
  }, {
    key: "VEHICLE BREAK-IN/THEFT",
    values: 581
  }];

将饼图布局的值定义为值（因为数据具有要在“值”属性中显示的值）

最初加载

dataTotal

：

  var path = svg.datum(dataTotal).selectAll("path")
    .data(pie)
    .enter().append("path")
    .attr("fill", function(d, i) {
      return color(i);
    })
    .attr("d", arc)
    .each(function(d) {
      this._current = d;
    }); // store the initial angles

最后，更改单选按钮后，将相关数据加载到饼图中，如下所示：

  function change() {
    var data = [];
    if (this.value == "dataDistrict") {
      data = dataDistrict;
    } else {
      data = dataTotal;
    }
    svg.datum(data).selectAll("path")
      .data(pie);
    path = path.data(pie); // compute the new angles
    path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs
  }

工作代码

  function change() {
    var data = [];
    if (this.value == "dataDistrict") {
      data = dataDistrict;
    } else {
      data = dataTotal;
    }
    svg.datum(data).selectAll("path")
      .data(pie);
    path = path.data(pie); // compute the new angles
    path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs
  }