Question

我正在学习D3，到目前为止，我有一个显示美国地图的基本应用程序，当用户将鼠标放在状态时，它会添加文本。我想做的事情也是当moused结束时状态变成不同的颜色。到目前为止我所拥有的：

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来引用数据，但我需要能够引用路径对象才能更改fill属性，而我不知道如何从中获取数据到实际的SVG元素。

Answer 1

this关键字指的是被鼠标悬停的数据元素。来自docs：

在选定节点上调度指定的事件时，指定的事件将为每个选定元素评估侦听器，并将其传递给当前数据（d），当前索引（i）和当前组（节点），将其作为当前DOM元素。听众总能看到它们元素的最新数据，但索引是属性的选择并在分配监听器时修复;更新 index，重新分配监听器。要访问a中的当前事件监听器，使用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版。

D3 - 按数据识别元素

1 个答案: