Question

我是使用d3和JavaScript的新手，并希望得到一些建设性的反馈。我正在嘲笑一个练习例子来学习d3，它涉及从两个来源（GISS和HAD）绘制1880 - 2010年的气候数据（温度异常）。到目前为止，我已经使用这些数据在d3中生成了一个多线图。代码和数据在这里https://gist.github.com/natemiller/0c3659e0e6a0b77dabb0

在此示例中，数据最初绘制为灰色，但每条线在鼠标悬停时着色为不同的颜色。

我想添加两个额外的功能。

我希望，在鼠标悬停时，重新排序这些线条，使得moused-over线位于顶部，基本上对线条进行重新排序。我已经读过，这需要基本上重新绘制SVG，我已经尝试过这个

的代码

source.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", "lightgrey")
.on("mouseover", function() {
  if (active) active.classed("highlight", false);
  active = d3.select(this.parentNode.appendChild(this))
      .classed("highlight", true);
})
      .style("stroke",function(d) {return color(d.name);})
.on("mouseout", function(d) {
d3.select('#path-' + d.name)
.transition()
.duration(750)
.style("stroke", "lightgrey")
})
.attr("id", function(d, i) { return "path-" + d.name; });

其中.on（“mouseover”...代码用于突出显示当前“moused-over”行。它似乎在我的示例中不起作用。所有行最初都会突出显示，然后变为灰色mouseover / mouseout。如果有人可以帮我确定如何更新我的代码，以便我可以重新排序鼠标悬停时的行，这将是很棒的！

我一直在玩这些线条，这样当线条或其标签被整个线条和标签颜色更新时。我已经使用id's玩了一下但是到目前为止我无法同时使用文本和线来改变颜色。我已设法1.鼠标悬停在线上并更改文本的颜色，2。鼠标悬停在文本上并更改线条的颜色，2。鼠标悬停在线条并更改线条，但没有线条和文本当它们中的任何一个被鼠标悬停时改变颜色。下面是一段代码作为一个开始（使用ids），但不能正常工作，因为它只指定路径，而不是文本和路径。我已经尝试将它们添加到d3.select（'#path - '，'＃text-'...以及此变体，但它似乎不起作用。

source.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", "lightgrey")
.on("mouseover", function(d){
d3.select(this)
.style("stroke",function(d) {return color(d.name);});
})
.on("mouseout", function(d) {
d3.select('#path-' + d.name)
.transition()
.duration(750)
.style("stroke", "lightgrey")
})
.attr("id", function(d, i) { return "path-" + d.name; });



source.append("text")
.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 15]}; })
.attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")"; })
.attr("x", 5)
.attr("dy", ".35em")
.style("stroke", "lightgrey")
.on("mouseover", function(d){
d3.select('#path-' + d.name)
.style("stroke",function(d) {return color(d.name);});
 })
.on("mouseout", function(d) {
d3.select('#path-' + d.name)
.transition()
.duration(750)
.style("stroke", "lightgrey")
})
.text(function(d) { return d.name; })
.attr("font-family","sans-serif")
.attr("font-size","11px")

.attr("id", function(d, i) { return "text-" + d.name; });

我非常感谢你的帮助。我是d3和这个帮助服务的新手。它目前是一个陡峭的学习曲线，但我希望这个例子和代码相当清楚。如果它不让我知道如何让它变得更好，我可以重新发布这个问题。

非常感谢，

内特

Answer 1

Chris Viau在d3 Google小组上对这个问题提供了一个很好的答案。 https://groups.google.com/forum/?fromgroups=#!topic/d3-js/-Ra66rqHGk4

诀窍是选择路径的g父级来重新排序它们：

this.parentNode.parentNode.appendChild（this.parentNode）;

这会将当前选择的容器“g”附加到所有其他“g”之上。

我发现这在许多其他实例中也很有用。

谢谢Chris！

在d3中鼠标悬停时更新行顺序（z方向）

1 个答案: