Question

第一季度。 我想使用 D3.js v4 。

现在每秒钟使用Ajax获取数据时我将更新图表数据。

var path = svg.append("g")
    .attr("clip-path", "url(#clip)")
    .append("path")
    .datum(data)
    .attr("class", "line")
    .attr("d", line)
    .style("stroke-width", 1)
    .style("stroke", "white")
    .style("fill", "none");
tick();

function tick() {
    apiData.splice(0, 1);
    data.push(apiData[0])
    var newLength = path.node().getTotalLength();
    path.attr("d", line)
        .attr("class", "line")
        .attr("transform", null)
        .attr("stroke-dasharray", totalLength + " " + totalLength)
        .attr("stroke-dashoffset", totalLength)
        .transition()
        .duration(2000)
        .attr("stroke-dashoffset", 0)
        .attr("transform", "translate(" + x(-1) + ",0)")
        .on("end", tick);
}

我只想添加没有旧数据的新数据。

但是此代码可以处理（绘制动画）所有数据。

第二季度。我想像这个视频一样成为一个亮点。

我认为这一步对我来说将是有效的

步骤1.进行div

<div id="glow-point"></div>

第2步。css绝对位置。

<style>
#glow-point {
    position: absolute;
    background-color: rgb(0, 150, 0);
    box-shadow: 0px 0px 40px 12px rgb(0, 120, 0);
    width: 5px;
    height: 5px;
    left: -1;
    top: -1;
    border-radius: 50px;
    animation: pulse 1s infinite;
}
</style>

第3步。当svg提取时，获得x，y点。

var glowPoint = document.getElementById('glow-point');
glowPoint.style.left = ????
glowPoint.style.top = ????

但是我不知道在 d3.js svg绘图时如何获得x，y点。 T.T

有人帮忙吗？

这里是参考视频。 reference Video.

这里是my fiddler

请帮助我.....我解决不了...

d3.js折线图从左到右绘制动画，仅添加新数据

0 个答案: