D3饼图转换

Question

我正在研究D3js中的转换，试图让他们使用从a Mike Bostock example派生的简单饼图工作。

我想将饼图中的数据从数据转换为data2，但图表不更新。

这是过渡声明：

path.selectAll("path").data(pie(data2)).transition().duration(2000); 

我缺少什么？

编辑

我已经得到了它与下面的工作。现在我想明白为什么这是行得通的。我理解.attr（“d”，arc）部分，但为什么我需要选择All（“path”）？

path.selectAll("path").data(pie(data2)).transition().duration(2000).attr("d",arc); 

编辑完

完整的代码（JSFiddle here）：

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

var color = d3.scale.category20(); 
var data = [2, 19, 18, 99, 100]; 
var data2 = [100, 1200, 20, 88, 12]; 

var pie, arc, svg, path, data; 

var chartCanvas = d3.select("#chart") 
    .append("svg") 
    .attr("width", width) 
    .attr("height", height); 


var path = chartCanvas 
    .append("g") 
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 



function setupPieChart() { 

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

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

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

} 

setupPieChart(); 

console.log(path); 

path.selectAll("path").data(pie(data2)).transition().duration(2000); 

Answer 1

我立即发现您缺少更新过程的一些重要部分。您复制了原始代码，但您忘记了更新部分:-)。我可以说，因为我在代码中看到了你存储的初始角度。

再次查看代码here并尝试了解arcTween函数。更多信息可以在here找到。你需要一个弧补间函数来计算基于初始角度的新角度（这就是为什么你首先存储初始角度的原因:-)。

我现在不会做小提琴，因为在我的经验中，如果你想了解补间圆弧功能，你会学到更多东西（就像我做过here。这是我个人项目的链接，但是随意复制代码，如你所见）。

您需要.selectAll（“路径”），因为那些是将要更新的实际元素。在做D3时，试着想一下图表元素如下：元素不可见（这是enter collection），现在可见的元素（可以看作更新集合）以及可以被删除的元素（出口收集）。

您需要根据要显示的数据查看这些元素。 D3是数据驱动的文档，因此所有内容都与您要在屏幕上显示的数据有关：如果您有数据但尚未包含任何元素，则可以“输入”元素。因此，您可以选择一些不在DOM中的元素，但很快就会出现，因为您会将它们绑定到您拥有的数据。

如果屏幕上已经有元素，并且元素的数量与需要显示的数据相匹配（例如：var data = [20，30，40]，那么您在这里获得3个数据用于3个div在屏幕上，你有一个匹配的数量），然后d3会更新你的选择（因此更新集合或更新选择），以便元素属性匹配数据。

如果屏幕上有更多元素，那么就会显示数据，然后您可以退出元素（因此退出选择或收集）。我希望这样做更清楚一点，它也有意义:-)

Answer 2

.transition开始为属性的transition变化率（s）后声明。你在.transition之后没有设置/做任何事情，所以没有内容可以插入。在来自Mike的原始示例中，您会看到他在开始转换后设置了d属性，指定custom interpolator (arcTween)