Question

我不是一位经验丰富的程序员，如果这个问题对你们中的一些人来说很明显，那么从一开始就道歉。

我试图在D3 / SVG中绘制4个同心圆，而不是点击时会增加半径并同时在y轴上移动。

我设法得到一个圆弧来改变半径（请参阅jfiddle）但理想情况下我想要

所有弧线从var radiusSmall变为var radiusLarge（我已尝试在不同弧级上进行for循环，但这不起作用）
< / LI>
所有弧线在y轴上移动300px。我已经在js JSfiddle的78到82行进行了最好的猜测，但它似乎并没有被解雇。

我知道在d3中调度多个转换有一些复杂因素，但我认为可能有多个错误阻止我这样做。

非常感谢您的帮助！

JSfiddle：http://jsfiddle.net/benws1/3xk9qgqe/3/

function zoom(d) {

    if (zoomToggle === 0) {

        d3.selectAll(".arc1")
            .transition().duration(500).ease("cubic")
            .attrTween("d", function (d) {

            var intRadIn = d3.interpolate(d.innerRadius, radiusLarge[2]);
            var intRadOut = d3.interpolate(d.outerRadius, radiusLarge[3]);

            return function (t) {
                innerRad = intRadIn(t);
                outerRad = intRadOut(t);
                return arc(d);
            };
        });

        d3.selectAll(".arcGroup")
            .transition().duration(500).ease("cubic")
            .attr("transform", function (d) {
            return "translate(" + xOffset + "," + yOffset + 300 + ")";
        });

        zoomToggle = 1;

};

Answer 1

再添加一个类到弧路径，如下所示。

arcGroup.append("path")
    .datum({
       innerRadius: innerRad,
       outerRadius: outerRad,
       startAngle: minAngArc,
       endAngle: maxAngArc
    })
    .attr("class", "arc_path arc" + i) //added arc_path class
    .attr("d", arc)
    .attr("fill", "#3f4749")
    .on("click", zoom);

现在，使用每个函数

将转换应用于缩放功能中的每个路径

d3.selectAll(".arc_path")
    .each(function(d,i){
        d3.select(this)
            .transition().duration(500)
            .ease("cubic")
            .attrTween("d", function (d) {
                var intRadIn = d3.interpolate(d.innerRadius, radiusLarge[i+1]);
                var intRadOut = d3.interpolate(d.outerRadius, radiusLarge[i+2]);
                return function (t) {
                    innerRad = intRadIn(t);
                    outerRad = intRadOut(t);
                    return arc(d);
                };
            });
    });

JSFiddle希望这有帮助。

<强>更新

你忘了把argGroup类放到g元素上。

var arcGroup = chartArea.append("g")
    .attr("class","arcGroup")
    .attr("transform", "translate(" + xOffset + "," + yOffset + ")");

为y Offset添加一个括号，如(yOffset + 300)，否则它将进行字符串连接。

d3.selectAll(".arcGroup")
        .transition().duration(500).ease("cubic")
        .attr("transform", function (d) {
            return "translate(" + xOffset + "," + (yOffset + 300) + ")";
        });

多个d3路径上的多个转换

1 个答案: