gpt4 book ai didi

javascript - 与 d3.svg.path() 的键绑定(bind)

转载 作者:行者123 更新时间:2023-11-28 02:03:02 26 4
gpt4 key购买 nike

我有一个简单的 d3.js 时间序列图,绘制为 SVG 圆圈。这些圆圈是键绑定(bind),因此当我从数组末尾删除数据时,右侧的圆圈将被删除,而当我从数组开头删除项目时,左侧的圆圈将被删除 exit.remove().

var circles = svg.selectAll('circle')
.data(data, function(d){return d.key})

现在,我想对 SVG 路径执行相同的操作。有没有办法将键绑定(bind)应用于 SVG 路径?

最佳答案

当我想在 d3 中使用 SVG 路径制作实时更新图时,我遇到了类似的问题。 d3 对于整个数据序列仅使用一个路径元素,即对于给定的数组,绘制的一条路径可能会变得非常长,具体取决于您的数据。这意味着 d3 不能通过删除圆形等 DOM 元素来简单地删除绑定(bind)数据元素。它必须修改类似 <path d="M0,0L1,0L2,1L3,2"> 的内容至<path d="M1,0L2,1L3,2"> 。不幸的是,我不认为 d3 具有此功能(尽管您可以自己编写代码!您需要重写 d3.interpolateString 并编写一些自定义插值器来注意到丢弃的点。)

这也意味着您无法使用 D3 的数据选择器,因为数据适用于具有多个元素的组,例如 svg 圆圈。您将必须使用 select("#yoursvgpath").datum(data)相反,它设置单个元素的数据,其中 data 是您的数据数组。

由于我知道我的代码运行的硬件速度很快(台式机 i7、ssd 等),因此每次添加或删除元素时我都会重新绘制路径。即便如此,它在 Firefox 中还是相当慢(但在 Chrome 中还不错),尤其是当点数超过 10,000 左右时。要重绘,只需再次调用 datum,然后重新应用坐标更改器(mutator)(类似于 select("#yoursvgpath").attr("d", line),其中 line 是路径数据更改器(mutator))。我最终只重新绘制每 5,000 个数据元素,这样路径就不会不断地重新计算。

如果其中任何一个令人困惑,我肯定会阅读有关在 d3 中制作折线图的内容,它与基于点的图表有很大不同(并且不太直观)。我还想看看https://gist.github.com/mbostock/1642874http://bost.ocks.org/mike/selection/ ,了解有关 d3 选择和折线图的更多信息。

关于javascript - 与 d3.svg.path() 的键绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18181648/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com