Question

我正在尝试构建一系列的弧线可视化，我很好奇如何（如果）可以在移动路径线上附加一个圆以使其看起来圆是弧的一部分（即随弧上升），然后以与弧线相同的速度达到顶峰然后下降]

这是我的代码：

function render(innerRadius) {

var width = 402,
    height = 402,
    //endAngle = 2 * Math.PI,
    colors = d3.scale.category20();

var svg = d3.select("#arcOne").append("svg")
    //.attr("class", "pie")
    .attr("height", height)
    .attr("width", width);


var data = [
    {startAngle: -0.5 * Math.PI, endAngle: 0.5 * Math.PI},

];



var arc = d3.svg.arc().outerRadius(201).innerRadius(innerRadius);
svg.select("g").remove();
svg.append("g")
    .attr("transform", "translate(201,201)")
    .selectAll("path.arc")
        .data(data)
        .enter()
        .append("path")
        .attr("class", "arc")
        .style("stroke", "rgb(8, 141, 209)")
        .style("stroke-width", 1)
        .style("fill", "none")
        .style("opacity", .3)

这是我一直在努力的障碍-也许我在这里错过了一些东西？

        .append("circle")
        .attr("id", "circle-render")
        .attr("cx", function (d) { return d.path; })
        .attr("cy", function (d) { return d.path; })
        .attr("r", 3)
        .style("stroke", "black")
        //.style("stroke-opacity", .1)
        .style("fill", "none") 


        .transition().duration(2000)
        .attrTween("d", function (d) { 
            var start = {startAngle: -0.5 * Math.PI, endAngle: -0.5 * 
            Math.PI} // <-A
            var interpolate = d3.interpolate(start, d); // <-B
            return function (t) {
                return arc(interpolate(t)); // <-C
            };
        })

如何在运动路径上附加圆

0 个答案: