使用 svg 和 d3 在圆和线之间转换

Question

JS Fiddle

我试图弄清楚如何通过在顶部“剪断”它来“展开”/“展开”一个圆圈，然后它会动画成一条线。

我用 16 个点画了一个圆（用第 17 个点来闭合它，因为如果我使用封闭插值，过渡看起来会很奇怪）

如何（是否通过动画？仅调整 x 和 y 点？，另一种插值？）您可以一次在圆和线之间转换一个点吗？

圆点：

//The data for our line
var circleData = [ { "x": 150 , "y": 20   },
                 { "x": 165.30, "y": 23.04},
                 { "x": 178.28, "y": 31.71},
                 { "x": 186.95, "y": 44.69},
                 { "x": 190   , "y": 60   },
                 { "x": 186.95, "y": 75.30},
                 { "x": 178.28, "y": 88.28},
                 { "x": 165.30, "y": 96.95},
                 { "x": 150   , "y": 100   },
                 { "x": 134.69, "y": 96.95},
                 { "x": 121.71, "y": 88.28},
                 { "x": 113.04, "y": 75.30},
                 { "x": 110   , "y": 60.00},
                 { "x": 113.04, "y": 44.69},
                 { "x": 121.71, "y": 31.71},
                 { "x": 134.69, "y": 23.04},
                 { "x": 150   , "y": 20   }   ];

线点：

var lineData = [ { "x": 10    , "y": 200   },
                 { "x": 20    , "y": 200   },
                 { "x": 30    , "y": 200   },
                 { "x": 40    , "y": 200   },
                 { "x": 50    , "y": 200   },
                 { "x": 60    , "y": 200   },
                 { "x": 70    , "y": 200   },
                 { "x": 80    , "y": 200   },
                 { "x": 90    , "y": 200   },
                 { "x": 100   , "y": 200   },
                 { "x": 110   , "y": 200   },
                 { "x": 120   , "y": 200   },
                 { "x": 130   , "y": 200   },
                 { "x": 140   , "y": 200   },
                 { "x": 150   , "y": 200   },
                 { "x": 160   , "y": 200   },
                 { "x": 170   , "y": 200   }   ];

Answer 1

在尝试 Duopixel 的演示时，我注意到的第一件事是圆圈似乎缩小到适合线条。因此，我决定让这条线与圆的长度相同。此外，为了获得均匀分布，我编写了两个函数来创建线和圆数据数组：

var numberOfPoints = 30;
var radius = 60
var margin = {top: 20,left: 20}
var lineLength = 2 * radius * Math.PI

var circleData = $.map(Array(numberOfPoints), function (d, i) {
    var imag = margin.left + lineLength / 2 + radius * Math.sin(2 * i * Math.PI / (numberOfPoints - 1))
    var real = margin.top + radius - radius * Math.cos(2 * i * Math.PI / (numberOfPoints - 1))
    return {x: imag, y: real}
})

var lineData = $.map(Array(numberOfPoints), function (d, i) {
    var y = margin.top + 2 * radius;
    var x = margin.left + i * lineLength / (numberOfPoints - 1)
    return { x: x, y: y}
}).reverse()

那么，现在，我们可以应用什么效果？我将使用最简单的一个：将圆的每个点映射到线上的点的过渡。

var circle = svgContainer.append("g")
    .append("path")
    .data([circleData])
    .attr("d", lineFunction)
    .attr("class", "circle")
    .on("click", transitionToLine)

function transitionToLine() {
    circle.data([lineData])
        .transition()
        .duration(1000)
        .ease("linear")
        .attr('d', lineFunction)
    circle.on("click", transitionToCircle)
}
function transitionToCircle() {
    circle.data([circleData])
        .transition()
        .duration(1000)
        .ease("linear")
        .attr('d', lineFunction)
    circle.on("click", transitionToLine)
}

Here is the jsFiddle，你只需点击节点即可看到动画。

需要注意的重要一点是，每个点的过渡时间都相同，而实际上您希望最后的点在靠近中间的点之后到达。您可以使用的技巧是使动画的持续时间与从源点到目标点的距离成正比，但是当您传递整个数组时，我看不到如何将其与线条一起使用，因此您无法更改持续时间对于一个特定的点。