Question

我使用多弧创建了一个甜甜圈，我想用新数据（弧线）更新我的甜甜圈。

var width = 300;
var height = 300;
var p = Math.PI * 2;

var vis = d3.select("body").append("svg")
                              .attr("width", width)
                              .attr("height", height);

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

var arcs = [];

arcs[0] = d3.svg.arc()
                   .innerRadius(50)
                   .outerRadius(70)
                   .startAngle(0)
                   .endAngle(p - 2);

arcs[1] = d3.svg.arc()
                  .innerRadius(50)
                  .outerRadius(70)
                  .startAngle(p - 2)
                  .endAngle(p);

group.append("path")
               .attr("d", arcs[0])
               .attr("class", "first")
               .attr("fill", "green");

group.append("path")
               .attr("d", arcs[1])
               .attr("class", "second")
               .attr("fill", "grey");

新数据（弧 - 函数）必须在数组中，我必须使用.data（数据集）方法传递它们。

// New data
var data1 = [];
data1[0] = d3.svg.arc()
                   .innerRadius(60)
                   .outerRadius(100)
                   .startAngle(0)
                   .endAngle(p - 1);

var data2 = [];
data2[0] = d3.svg.arc()
                   .innerRadius(60)
                   .outerRadius(100)
                   .startAngle(p - 1) 
                   .endAngle(p);

- 我可以用新的弧更新我的甜甜圈，但我遇到的问题是过渡不起作用。

- 我想按照之前描述的步骤进行转换。我已经知道如果我不使用.data（数据集）方法并使用.attr（“d”，arc）而不是.attrTween方法，那么转换将起作用。

- 但这不是我想要的，因为我想将解决方案应用于多个甜甜圈。

//On click, update with new data      
d3.select("p")
      .on("click", function () {

//Update all rects
vis.selectAll("path.first")
        .data(data1)
        .transition()
        .duration(1000)
        .attrTween("d", function (d) { return d; });

vis.selectAll("path.second")
        .data(data2)
        .transition()
        .duration(1000)
        .attrTween("d", function (d) { return d; });

以下是一个示例，点击更新即可查看更改： example

d3.js由多弧创建的甜甜圈过渡不起作用

0 个答案: