Question

我正在构建一个D3圆环图，它应该根据无线电输入在两个数据集之间振荡。我正在尝试修改this example。

我的数据集相当简单：

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之间的数据结构差异导致了问题，但无论我如何修改数据，都没有任何工作：/

Answer 1

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

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

将饼图布局的值定义为值（因为您的数据的值在值属性中显示）。

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

最初加载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
  }

工作代码here

D3 Donut Chart：如何在两个对象数据集之间交替？

1 个答案: