Question

我在那里发帖是因为我在其他帖子或google上找不到任何内容。

正如你在JS小提琴上看到的那样，我在每个点都有一个带圆圈的折线图。我想用新数据更新此图表。问题是我可以获得比图中已有的更少或更多的点。例如，我的折线图上可以有8个点，然后当我更新图表时，我可以只有4个，甚至15个点。我的圈子没有正确更新，因为我只是改变已经存在的圆圈的值。但我真的不知道如何正确更新它们。

我有时可以获得这些数据：

            var data = [
                {"date":"4-May-12","close":Math.random()*568.13,"open":Math.random()*35.12},
                {"date":"3-May-12","close":Math.random()*568.13,"open":Math.random()*35.12},
                {"date":"2-May-12","close":Math.random()*568.13,"open":Math.random()*35.12},
                {"date":"1-May-12","close":Math.random()*568.13,"open":Math.random()*35.12},
                {"date":"30-Apr-12","close":Math.random()*354.98,"open":Math.random()*424.56},
                {"date":"27-Apr-12","close":Math.random()*24.00,"open":Math.random()*253.89},
                {"date":"26-Apr-12","close":Math.random()*490.70,"open":Math.random()*215.54},
                {"date":"25-Apr-12","close":Math.random()*42.00,"open":Math.random()*351.23},
                {"date":"24-Apr-12","close":Math.random()*210.28,"open":Math.random()*20.23},
                {"date":"23-Apr-12","close":Math.random()*20.70,"open":Math.random()*368.34},
                {"date":"20-Apr-12","close":Math.random()*412.98,"open":Math.random()*42},
                {"date":"19-Apr-12","close":Math.random()*26.44,"open":Math.random()*20.56},
                {"date":"18-Apr-12","close":Math.random()*48.34,"open":Math.random()*356.45},
                {"date":"17-Apr-12","close":Math.random()*26.44,"open":Math.random()*20.56},
                {"date":"15-Apr-12","close":Math.random()*48.34,"open":Math.random()*356.45},
            ];

其他时间只是这些数据:(或多或少）

            var data = [
                {"date":"4-May-12","close":Math.random()*568.13,"open":Math.random()*35.12},
                {"date":"3-May-12","close":Math.random()*568.13,"open":Math.random()*35.12},
                {"date":"2-May-12","close":Math.random()*568.13,"open":Math.random()*35.12},
                {"date":"1-May-12","close":Math.random()*568.13,"open":Math.random()*35.12},
                {"date":"30-Apr-12","close":Math.random()*354.98,"open":Math.random()*424.56},
            ];

有人可以帮助我吗？

非常感谢！

Answer 1

最好删除旧点并添加新点而不是尝试移动它们。要执行此操作，您可以使用id函数使这些点唯一 - 请参阅here

一个小例子：

svg.selectAll("circle")
    .data(myData, function(d) { return d.x; })
    .enter()
    .append("circle");

这里重要的部分是点由它们的x值标识，而不是它们在数据点数组中的索引。事实上，这可能有助于您当前的情况，因为积分只会上下移动而不是左右移动。

d3.js在折线图上更新圆圈

1 个答案: