Как я могу добавить круг на движущуюся дорожку - PullRequest
Новая
       63

Как я могу добавить круг на движущуюся дорожку

0 голосов
/ 27 февраля 2019

Я пытаюсь построить серию визуализаций дуг, и мне было любопытно, как (если) можно добавить круг на движущуюся линию пути, чтобы он казался, что круг является частью дуги [т.е. поднимается вместе с дугой, достигает пика, а затем спускается в том же темпе, что и дуга]

Вот мой код: 

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
            };
        })
...