Question

我正在关注Mike Bostock's D3 animated pie-chart update并且我无法理解代码的某些部分。希望有人可以帮助解决这些问题：

var path = svg.datum(data).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

我的问题在于最后一行。我在不同的教程中看到了这一点。我想知道初始角度存储在哪里？如果我查看我的饼（数据集）数组中的对象，我看不到_current条目。

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

这是做什么的？是否有必要阻止更新动画，以防用户在动画完成之前再次更新动画（即通过在2000毫秒之前点击其他输入）？

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

（我添加的数字更容易引用每一行）（1）这是否将数据的值存储为value？（2）这应该连接到上面的timeout变量，对吗？（3）写d.value而不是d[value]是否相同？由于我的数据结构与教程中使用的数据结构不同，我将很快回到这里。

function type(d) {
 d.apples = +d.apples;
 d.oranges = +d.oranges;
 return d;
}

我根本没有得到这个，type也用于数据加载函数，但我无法理解逻辑和语法。我怀疑它与“调整”数据和绘制函数到用户选择的“类型”（即输入）有关，但这是我能得到的。至于我自己的图表，这是我打算使用的数据（部分）：

[
{
"key":"amministrazione",
"categoria":"funzioni",
"val2015":404571081,
"val2013":374545999
},
{
"key":"sociale",
"categoria":"funzioni",
"val2015":235251679,
"val2013":258973653
},
{
"key":"territorio e ambiente",
"categoria":"funzioni",
"val2015":286164667,
"val2013":274949400
},
{
"key":"viabilità e trasporti",
"categoria":"funzioni",
"val2015":144185664,
"val2013":140619534
},
{
"key":"istruzione",
"categoria":"funzioni",
"val2015":168774925,
"val2013":170016208
}
]

当用户点击输入（即单选按钮）时，我想更改显示的年份（从val2015到val2013，反之亦然）。在上面的（3）中，pie.value被改变了。我会为每年将pie.value更改为相应d.data.valXX条目的函数。我猜Mike通过将pie.value中的更改与用户点击的输入相关联，使代码更有效。这是type函数的用途吗？

D3.js了解饼图动画

0 个答案: