0

我参考此图表代码参考来绘制此图表。在这段代码中，我编写了 click 事件，如svg.append("g").on("click", function(d){console.log(d.id)}. 但它不起作用。 点击查看图片

    function ready(error, guns, us, emp) {
      emp.forEach(function (d) {
        unemployment.set(d.id, d.rate);
      });

      if (error) throw error;
    
// Draw the map
      svg.append("g")
        .attr("class", "counties")
        .selectAll("path")
        .data(topojson.feature(us, us.objects.counties).features)
        .enter().append("path")
        .attr("fill", function (d) { return color(d.rate = unemployment.get(d.id)); })
        .attr("d", path)
        .style("stroke", "lightgrey")
        .append("title")
        .text(function (d) {
          return `${d.properties.name}: ${d.rate}%`;
        })
        .on('click', function (d) {
          console.log(d.id);
        })
4

1 回答 1

0

您遇到问题的原因是您的事件侦听器链接到标题而不是县路径本身。

这是一个应该有帮助的可观察块；我在下面对您的代码所做的更改进行了注释，并通过创建$countyPaths变量来阐明命名差异：

  const $countyPaths = svg.append("g")
    .selectAll("path")
    .data(topojson.feature(us, us.objects.counties).features)
    .join("path")
  
  
  $countyPaths
      .attr("fill", d => color(data.get(d.id)))
      .attr("d", path)
    .append("title") 
      .text(d => `${d.properties.name}, ${states.get(d.id.slice(0, 2)).name}
      ${format(data.get(d.id))}`);//adding an event listener after this doesn't work, because it would refer to the title
  
  
  //Here the county paths are referred to, and the event listener is appropriately linked
    $countyPaths.on('click',d=>console.log(d.id))

通读此链接可能有助于解释 d3 的一些更精细的选择点，但基本上，无论最后附加的项目是什么，这都是您将在事件侦听器中引用的项目。由于在您的情况下，您附加title了元素，因此您正在向这些元素添加事件侦听器。以我在下面示例中所做的方式分解代码允许您引用连接的元素本身，在您的情况下，这些元素是path元素。

于 2020-07-03T16:16:46.960 回答