Question

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

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

这是转换声明：

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

我错过了什么？

修改

我已经使用了以下内容。现在我想了解为什么这样做。我理解.attr（“d”，arc）部分，但为什么我需要selectAll（“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

.transition为其后声明的属性更改启动transition。你没有在.transition之后设置/做任何事情，所以没有什么可以插补。在Mike的原始示例中，您会看到他在开始转换后设置d属性，指定custom interpolator (arcTween)

Answer 2

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

再次查看代码here并尝试理解arcTween函数。可以找到更多信息here。您需要一个弧补间功能来根据初始角度计算新角度（这就是您首先存储初始角度的原因:-)。

我现在不会做小提琴，因为根据我的经验，如果你试图理解弧补间功能，你会学到更多（正如我here那样。这是一个个人项目的链接。我的，但你可以随意复制代码。

你需要.selectAll（“path”），因为那些是将要更新的实际元素。在执行d3时，请尝试将图表元素视为如下：尚未显示的元素（输入集合），现在可见的元素（可以看作更新集合）和可以删除的元素（退出集合）。

您需要根据要显示的数据查看这些元素。 D3是数据驱动的文档，因此一切都与您想要在屏幕上显示的数据有关：如果您有数据但没有元素，则执行元素的“输入”。因此，您可以选择不在DOM中的元素，但很快就会这样，因为您将它们绑定到您拥有的数据。

如果屏幕上已经有元素，并且元素的数量与您需要显示的数据相匹配（例如：var data = [20,30,40]，则此处有3个数据，其中包含3个div的数据在屏幕上，您有匹配的数量），然后d3将更新您的选择（因此更新集合或更新选择），以便元素属性与数据匹配。

如果屏幕上有更多元素，则显示数据，然后您可以退出元素（同样，退出选择或集合）。我希望它能使它更清晰一些，并且它也有意义： - ）

D3饼图转换

2 个答案: