在D3力导向图中高效地重新渲染节点

cuxqih21  于 2023-05-18  发布在  其他
关注(0)|答案(1)|浏览(122)

我有这个:

let nodeSelection = svg
        .selectAll("circle")
        .data(nodes)
        .enter()
        .append("g")
        .append("circle")
        .attr("r", d => d.size)
        .attr("fill", d => d.color)
        .attr("img", d => d.icon)
        .call(
            d3
                .drag()
                .on("start", dragStart)
                .on("drag", drag)
                .on("end", dragEnd)
        );

频繁地(如每秒15x),将存在对图中的各种节点的更新。这将是太昂贵的方式重新渲染每一个小更新的一切。我试图找到正确的调用来更新一个节点,或者只是一个链接,使用如下代码:

svg
        .selectAll("circle")
        // .data(nodes) // probably don't want to provide new data?
        .enter()
        .attr(val++, val) // adding random-ass attributes to try
        .attr("fill", d => 'black')

有没有什么方法可以强制重新渲染图的一部分?

nhjlsmyf

nhjlsmyf1#

如果要将所有节点的颜色更改为黑色,可以使用

svg
  .selectAll('circle')
  .attr('fill', 'black')

你是对的,你可能不需要新的数据,除非你期待新的点出现。注意

selection.enter()

是指从添加新数据开始进入的节点。因此,如果没有新数据,则选择肯定是空的,这是代码无法工作的一个原因。此外,使用函数赋值属性也假定存在数据,这就是为什么我们应该使用

.attr('fill', 'black')

而不是

.attr('fill', d => 'black')

相关问题