在折线图上为点添加文本标签

时间:2018-06-05 07:50:57

标签: d3.js linechart

我有一张带有3个正弦波的多线图表。 点(圆圈)沿着线移动。我无法理解如何在每个点附近放置文本标签(A,B,C)。

演示https://jsfiddle.net/v5Lc0zfe/10/

let i = 0;
let ticker = d3.interval(function(elapsed){
    if (i == 360){
        ticker.stop();
    }

    const sin_ids = ['sin-a', 'sin-b', 'sin-c'];

    const tick_data = [
        data[0].values[i],
        data[1].values[i],
        data[2].values[i]
    ];

    let circle = svg.selectAll('circle').data(tick_data);

    circle.exit().remove();

    circle.enter().append("circle")
        .merge(circle)
        .transition()
        .attr('class', function(d,i){
            return sin_ids[i];
        })
        .attr("r", 4)
        .attr("cx", function(d,i) {
            return x(d.xVal); })
        .attr("cy", function(d,i) { return y(d.yVal); });
    i++;
}, 150);

0 个答案:

没有答案