Question

我使用这样的简单定义：

// definition of how an arc looks like
var arc = d3.svg.arc()
    .innerRadius(20)
    .outerRadius(30)
    .startAngle(function(d){return d.mystartangle;})
    .endAngle(function(d){return d.myendangle;});

结合补间/转换定义，如下所示：

// definition of how to nicely tween an arc
function arcTween(newdata, index) {
    var i1 = d3.interpolate(olddata.mystartangle, newdata.mystartangle);
    var i1 = d3.interpolate(olddata.myendangle, newdata.myendangle);
    return function(t) {
        newdata.mystartangle = i1(t);
        newdata.myendangle = i2(t);
        return arc(newdata);
    };
};

非常好地更新由圆弧组成的圆环图。结果看起来像这里http://bl.ocks.org/mbostock/5100636一样平滑，但带有绑定数据。

// arcs
// ... ENTER
vizBody.selectAll('path.arcs')
    .data(mydata)
    .enter()
    .append('path')
        .attr('class', 'arcs')
        .attr('d', arc);
// ... UPDATE
vizBody.selectAll('path.arcs')
    .data(mydata)
    .transition()
    .duration(500)
    .attrTween('d', arcTween);

现在我需要用文本标记弧来完成我的图表。 我想以与弧相同的方式补间/转换这些文本标签。我找不到带有绑定数据和漂亮文本转换的教程。因此，我虽然使用与弧相同的想法，但我现在已经失败了：

var mytext = d3.svg.text()

显然没有d3.svg.text（）。 Google在括号中只显示了2次点击代码片段。

为什么这在d3中不起作用？

补间文字;如何围绕图表旋转文本

0 个答案: