如何克隆现有组并将其修改为选择？答案

【问题标题】：How can I clone and modify an existing group into a selection?如何克隆现有组并将其修改为选择？
【发布时间】：2014-06-28 22:52:29
【问题描述】：

我有一个带有复杂组模板的现有 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> 标签没有用，因为它引用元素，但是你不能修改内部元素而不修改所有实例，如this SO question

事实上，我想在this proposal 中对 D3 做同样的事情。我该怎么做？

【问题讨论】：

标签： javascript svg d3.js

【解决方案1】：

这类似于我在获取元素以从父节点继承数据时经常遇到的问题。解决方案隐藏在 Mike Bokstock 的article on selections 中。关键是数据可以通过使用插入、追加或选择从父级传递到子级。请注意，使用 selectAll 不会将数据传递给孩子。

在你的情况下，你只需要改变

.selectAll("#fillPart").attr('fill', function(d){return 'red'})

到

.select("#fillPart").attr('fill', function(d){return d})

Here 是一个更新的小提琴。

【讨论】：

【解决方案2】：

问题是您正在使用selectAll 选择fillPart，而您已经选择了所有.instances，从而创建了一个嵌套选择，这不是您想要的。

此外，由于您正在克隆元素，因此您不希望在其中包含 id，因为这样您将拥有多个具有相同 id 的元素。首先将id="fillPart" 更改为class="fillPart"。

当您选择所有.instance 元素时，您在选择中调用的方法将应用于选择中的每个元素一次，因此而不是调用selectAll('.fillPart')，这将选择所有fillPart 每个实例中的元素，您只需调用select('.fillPart') 来选择附加到当前实例的单个fillPart。

完成后，您现在可以根据数据分配填充颜色：

.select(".fillPart")
  .attr('fill', function(d){ return d; });

现在您应该得到想要的结果。这是更新后的JSFiddle。

【讨论】：