javascript - D3 - 通过数据识别元素

Question

我正在学习 D3，到目前为止，我有一个基本的应用程序，可以显示美国 map ，当用户将鼠标悬停在某个州时，它会添加文本。我想做的就是当鼠标悬停在状态上时，状态会变成不同的颜色。到目前为止我所拥有的:

var svg = d3.select("body")
  .append("svg")
    .attr("width", 500)
    .attr("height", 500);

d3.json("/HelloWorld/data/states.json", function(data) {
  var projection = d3.geo.albersUsa().translate([250,250]).scale(650);
  var path = d3.geo.path().projection(projection);
  svg.selectAll("path")
    .data(data.features)
    .enter()
    .append("path")
      .attr("d",path)
      .attr("fill", "red")
      .attr("stroke", "blue")
      .on("mouseover", function(d, i) {

  d3.select("body").append("text").html("</br>"+d.properties.NAME);
});

问题是虽然我可以用 d 引用数据，但我需要能够引用路径对象才能更改填充属性，并且我不知道如何从数据获取实际的 SVG 元素。

Answer 1

this 关键字指的是鼠标悬停在其上的数据元素。来自 docs :

When a specified event is dispatched on a selected node, the specified listener will be evaluated for each selected element, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element. Listeners always see the latest datum for their element, but the index is a property of the selection and is fixed when the listener is assigned; to update the index, re-assign the listener. To access the current event within a listener, use d3.event.

所以，只需这样做:

.on("mouseover",function(d,i){
    d3.select("body")
      .append("text")
      .html("</br>"+d.properties.NAME);
    d3.select(this)
      .style("fill", someAwesomeColor);
});

<小时/>

要从鼠标悬停的元素处获取“下一个”元素:

.on("mouseover",function(d,i){
    d3.select(originalSelection.nodes()[i + 1])
      .style("fill", someAwesomeColor);
});

其中 originalSelection 是您调用 .data 的初始选择。 注意，.nodes仅在d3版本4中可用。