javascript - 使用 D3 创建一个动画脉冲圈

Question

我知道之前在 stackoverflow 上也有人问过类似的问题，但我有相当具体的要求。我正在尝试为 D3 图表生成一个脉冲点。

我在 codepen.io 上修改了一些代码并提出了 this .

我如何使用 D3 transition() 而不是(俗气的)CSS 类来做同样的事情？

更多的是:

circle = circle.transition()
.duration(2000)
.attr("stroke-width", 20)
.attr("r", 10)
.transition()
.duration(2000)
.attr('stroke-width', 0.5)
.attr("r", 200)
.ease('sine')
.each("end", repeat);

请随意 fork 我的 sample 笔。

谢谢!

Answer 1

看看 example在 GitHub 上 whityiu

请注意，这是使用 d3 版本 3。

我已经修改了该代码以生成您在下面的 fiddle 中所追求的东西。

var width = 500,
    height = 450,
    radius = 2.5,
    dotFill = "#700f44",
    outlineColor = "#700f44",
    pulseLineColor = "#e61b8a",
    bgColor = "#000",
    pulseAnimationIntervalId;

var nodesArray = [{
    "x": 100,
    "y": 100
}];
// Set up the SVG display area
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("fill", bgColor)
    .classed('visual-area', true);

var bgRect = d3.select("svg").append("rect")
    .attr("width", width)
    .attr("height", height);

var linkSet = null,
    nodeSet = null;

// Create data object sets
nodeSet = svg.selectAll(".node").data(nodesArray)
    .enter().append("g")
    .attr("class", "node")
    .on('click', function() {
        // Clear the pulse animation
        clearInterval(pulseAnimationIntervalId);
    });

// Draw outlines
nodeSet.append("circle")
    .classed("outline pulse", true)
    .attr("cx", function(d) {
        return d.x;
    })
    .attr("cy", function(d) {
        return d.y;
    })
    .attr("fill", 'none')
    .attr("stroke", pulseLineColor)
    .attr("r", radius);

// Draw nodes on top of outlines
nodeSet.append("circle")
    .attr("cx", function(d) {
        return d.x;
    })
    .attr("cy", function(d) {
        return d.y;
    })
    .attr("fill", dotFill)
    .attr("stroke", outlineColor)
    .attr("r", radius);

// Set pulse animation on interval
pulseAnimationIntervalId = setInterval(function() {
    var times = 100,
        distance = 8,
        duration = 1000;
    var outlines = svg.selectAll(".pulse");

    // Function to handle one pulse animation
    function repeat(iteration) {
        if (iteration < times) {
            outlines.transition()
                .duration(duration)
                .each("start", function() {
                    d3.select(".outline").attr("r", radius).attr("stroke", pulseLineColor);
                })
                .attrTween("r", function() {
                    return d3.interpolate(radius, radius + distance);
                })
                .styleTween("stroke", function() {
                    return d3.interpolate(pulseLineColor, bgColor);
                })
                .each("end", function() {
                    repeat(iteration + 1);
                });
        }
    }

    if (!outlines.empty()) {
        repeat(0);
    }
}, 6000);

Fiddle