将鼠标悬停在<p>元素上以突出显示地理边界，D3显示

Question

我画了一张芝加哥在D3的77个居民区的地图。唯一的挑战是，很难知道哪个社区是哪个社区。因此，我所做的是在HTML文件的主体中使用p元素(包含邻居名称)创建div，并将它们定位到svg/canvas中的一个空白点。

查看可视化的here。

我想要做的是，当你将鼠标悬停在名字上时，邻里的地理边界会高亮显示。不知何故，我需要将地理与文本联系起来，但我不知道怎么做。

Answer 1

对于更健壮的解决方案，理想情况下您会希望向数据中添加一个id字段。这里假设您的数据是某种格式(比如JSON)。你可能已经有了一个唯一的标识符，你可以用它来代替，但是如果没有，下面的方法应该是有效的。

var i = 0;
for (var x in dataSet)
    dataSet[x].id = ++i; //Or i++ for zero-based indexing

现在它取决于如何生成svg元素，但理想情况下使用的是d3的enter函数。在这种情况下，只需将enter的结果创建为一个变量，并使用它来追加路径(映射部分)和文本。

var dataSelect = svg.selectAll(".item").data(data.items);
var dataEnter = dataSelect.enter();
dataEnter.append("path").....
dataEnter.append("text").....text(function(d){return d.label;}) //Using text because this is drawn inside the SVG.

通过使用data和enter函数，创建的对象会自动绑定id数据。

这使它成为mouseover函数中的text.id == path.id的一个简单例子。

svg.selectAll(".itemText").on("mouseover", function(textItem){
    svg.selectAll(".item").each(function (cityItem){
    if (cityItem.id == textItem.id)
        d3.select(this).style("fill", "green");
    else
        d3.select(this).style("fill", function(d){return d.color;});
  })
});

我很容易就做到了这一点，你可以看到here

请注意，这并不使用p元素，因为理想情况下，如果您正在使用SVG，那么您可能应该使用text元素。如果必须使用p元素，那么仍然可以使用这种通用技术，但在mouseover上使用p.text()作为匹配因子，而不是id，假设名称绑定到某个地方的路径数据。