1

I have a collection of SVG groups g1, g2, ..., gn, each having m paths as children. The paths in each group have distinct classes "C1", "C2", ..., "Cm". Only these paths have these classes. Therefore, a selection such as d3.selectAll(".C1") (or, alternatively, $(".C1")) will consist of exactly n paths, one from each of the groups g1,...,gn.

The paths in each group can overlap visually, but there is no overlap between paths in different groups.

Initially all the paths are colored black, and I would like to implement the ability to highlight (with a different color) all the paths belonging to a particular class.

An expression like

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

or

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

will set to green (#0f0) the color of all the paths having class cx (where cx holds one of the strings "C1", ..., "Cm"), but unfortunately it often fails to produce the desired highlighting effect, namely, when the selected paths are visually obscured by the other paths. (IOW, these not-highlighted paths get to be drawn "on top" of the highlighted ones, thereby obscuring the latter, at least partially.)

One solution would be to, before changing their color, first re-insert the selected paths into the DOM so that they are the last ones among their (by-design-unselected) siblings.

Of course, one could imagine writing some elaborate DOM-manipulation code to achieve this, but it occurs to me that this is precisely the type of code that d3 and jQuery are meant to make unnecessary.

What would be the right incantation for doing this? And also, would there be any reason to prefer one of d3 or jQuery for this task?

4

2 回答 2

1

selection.sort(comarator)将重新排序 DOM。

于 2013-10-02T14:44:11.667 回答
0

好的，我找到了一种方法来做到这一点，至少是jQuery：

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

（这似乎有效，尽管我不能保证它的正确性，或者它优于其他方法，尤其是那些使用d3代替的方法jQuery。）

于 2013-10-02T15:09:29.073 回答