Javascript D3-通过数据识别元素

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

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);
});

var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，500）
.attr（“高度”，500）；
d3.json（“/HelloWorld/data/states.json”），函数（数据）{
var projection=d3.geo.albersUsa（）.translate（[250250]）标度（650）；
var path=d3.geo.path（）.projection（projection）；
svg.selectAll（“路径”）
.数据（数据.特征）
.输入（）
.append（“路径”）
.attr（“d”，路径）
.attr（“填充”、“红色”）
.attr（“笔划”、“蓝色”）
.on（“鼠标悬停”，功能（d，i）{
d3.选择（“body”）.append（“text”）.html（“
”+d.properties.NAME”）；
});

---

问题是，虽然我可以使用

d

引用数据，但我需要能够引用path对象以更改fill属性，并且我不确定如何从数据获取到实际的SVG元素。

此

关键字引用正在鼠标移过的数据元素。从：

在选定节点上调度指定事件时，指定的
将为每个选定元素计算侦听器，并传递
当前基准（d）、当前指数（i）和当前组
（节点），并将其作为当前DOM元素
其元素的最新数据，但索引是
选择，并在指定侦听器时固定；更新
索引，重新分配侦听器。若要访问
侦听器，使用d3.event

所以，只要做：

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

其中，
originalSelection
是您调用的
.data
的初始选择。注意，
.nodes
仅在
d3
版本4中可用。
此
关键字指正在鼠标移动的数据元素。从：

在选定节点上调度指定事件时，指定的
将为每个选定元素计算侦听器，并传递
当前基准（d）、当前指数（i）和当前组
（节点），并将其作为当前DOM元素
其元素的最新数据，但索引是
选择，并在指定侦听器时固定；更新
索引，重新分配侦听器。若要访问
侦听器，使用d3.event

所以，只要做：

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

其中，
originalSelection
是您调用的
.data
的初始选择。注意，
.nodes
仅在
d3
版本4中可用。
检查此项：
此
关键字指的是鼠标悬停的数据元素。检查此项：此
关键字指的是数据元素被鼠标划过。太棒了，我真的试过这样的东西。attr（东西）但是我想我需要d3。在它周围选择。它像一个符咒一样工作。虽然实际上我有一个后续问题。是否可以从数据到元素？例如，假设每个状态都有一个索引，当鼠标移到它上面时，我想用索引+1更改状态的颜色（无论出于什么原因），我该怎么做呢？在d3中，从元素到数据似乎很容易，但相反，似乎很有挑战性。我得到了错误“ReferenceError:originalSelection未定义”当我尝试使用originalSelection时。@zachvac，originalSelection是从.data调用返回的变量。您需要定义它。好的，很抱歉，让我用另一种方法来尝试。说我希望用户输入一个状态的名称，并做些什么（说更改颜色），而不是说他们选择什么例如，我只想通过硬编码该字符串来更改“Texas”的状态。如何选择绑定到具有属性的数据的元素。该文本的名称？太棒了，我实际上已经尝试过类似这样的东西。attr（stuff）但是我想我需要d3。在它周围选择。它像一个符咒一样工作。虽然实际上我有一个后续问题。是否可以从数据到元素？例如，假设每个状态都有一个索引，当鼠标移到它上面时，我想用索引+1更改状态的颜色（无论出于什么原因），我该怎么做呢？在d3中，从元素到数据似乎很容易，但相反，似乎很有挑战性。我得到了错误“ReferenceError:originalSelection未定义”当我尝试使用originalSelection时。@zachvac，originalSelection是从.data调用返回的变量。您需要定义它。好的，很抱歉，让我用另一种方法来尝试。说我希望用户输入一个状态的名称，并做些什么（说更改颜色），而不是说他们选择什么例如，我只想通过硬编码该字符串来更改“Texas”的状态。如何选择绑定到具有属性的数据的元素。该文本的名称？