javascript – 如何将现有组克隆并修改为选择？

2023年2月3日 185次阅读

我有一个包含复杂组模板的现有SVG.我想在一些数据的上下文中重用和乘以它(selection.data().enter())

<svg>
<g id="template">
  *** complex inner ***
</g>
</svg>

我想根据一些数据用D3克隆这个#template,但我想根据数据修改每个克隆：

d3.select("svg").selectAll('g')
        .data(['red', 'blue', 'yellow', 'lime']).enter()
        .append(***A CLONE OF MY TEMPLATE****)
        .select(***SOMETHING IN MY COMPLEX INNER***)
        .attr('fill', function(d){return d;})

Here是一个小提琴,它将克隆与数据相乘,但我不能修改第一个矩形的填充颜色,例如

< use> tag没有用,因为它引用了element,但是你不能修改内部元素而不修改像this SO question这样的所有实例

事实上,我想和D3在this proposal一样.
我怎样才能做到这一点？

最佳答案 这类似于我经常遇到的问题,即获取元素以从父节点继承数据.解决方案隐藏在Mike Bokstock的
article on selections中.关键是数据可以通过使用insert,append或select从父级传递给子级.请注意,使用selectAll不会将数据传递给子级.

在您的情况下,您只需要更改

.selectAll(“#fillPart”).attr(‘fill’,function(d){return’red’})

至

.select(“#fillPart”).attr(‘fill’,function(d){return d})

Here是一个更新的小提琴.

点赞