Question

我有一组SVG群组g1，g2，...，gn，每个群组都有 m 路径作为孩子。每个组中的路径都有不同的类"C1"，"C2"，...，"Cm"。只有这些路径具有这些类。因此，诸如d3.selectAll(".C1")（或者，$(".C1")）之类的选择将由 n 路径组成，每个路径来自g1，... 。gn。

每组中的路径可以在视觉上重叠，但不同组中的路径之间没有重叠。

最初所有路径都是黑色的，我想实现突出（使用不同颜色）属于特定类的所有路径的能力。

像

这样的表达式

d3.selectAll("." + cx).attr("style", "stroke: #0f0")

或

$("." + cx).attr("style", "stroke: #0f0")

将设置为绿色（＃0f0）具有类cx的所有路径的颜色（其中cx包含其中一个字符串"C1"，...，{{1}然而，不幸的是，它经常无法产生所需的突出显示效果，即，当所选路径被其他路径视觉遮挡时。（IOW，这些未突出显示的路径可以在突出显示的路径的“顶部”绘制，从而至少部分地遮挡后者。）

一种解决方案是，在更改颜色之前，首先将选定的路径重新插入DOM，以便它们是（按设计未选定的）兄弟中的最后。< / p>

当然，可以想象编写一些精心设计的DOM操作代码来实现这一点，但我发现这正是"Cm"和d3所要求的代码类型。

这样做的正确咒语是什么？而且，是否有理由更喜欢jQuery或d3中的一个来执行此任务？

Answer 1

selection.sort(comparator)会重新排序DOM。

Answer 2

好的，我找到了一种方法，至少使用jQuery：

$("." + cx).each(function(){
                   var n = $(this);
                   var p = n.parent();
                   n.detach().appendTo(p);
                 }).attr("style", "stroke: #0f0");

（这个似乎可以工作，虽然我不能保证其正确性，或者它优于其他方法，特别是那些使用d3代替jQuery的方法。）

如何将所选节点重新插入“最后一个兄弟姐妹”

2 个答案: