javascript - d3 中具有不同翻转 Action 的多个多边形

Question

我正在尝试将几个多边形变成 d3 中的按钮。我需要每个多边形都有不同的滚动/滚动/点击操作。我这样画多边形:

poly = [coordinates];

poly2 = [coordinates];  

//drawing polygons
chart.selectAll("polygon")
    .data([poly, poly2])
  .enter().append("polygon")     
    .attr(...   //attributes go here
//I add functionality below
    .on("mouseover", function (d) {
        chart.selectAll("polygon")
        .attr("fill","orange");
    })
    .on("mouseout" , function (d) {
        chart.selectAll("polygon")
        .attr("fill","steelblue");
    });

这会将所有“在鼠标上...”效果应用于所有多边形。为每个多边形分配不同的“鼠标...”操作的最佳方法是什么？例如，我希望 poly 在鼠标悬停时将颜色切换为 orange，但 poly2 在鼠标悬停时将颜色变为 red。这是我的 fiddle with the polygon "buttons" , 但我只能为那里的两个多边形分配相同的 Action 。

Answer 1

我的方法是在数据中设置悬停颜色:

像这样:

poly2 = {
  color: "green",//mouse hover color
  points: [{
    "x": 71,
    "y": 1.5
  }, {
    "x": 75,
    "y": 0
  }, {
    "x": 79,
    "y": 1.5
  }, {
    "x": 75.5,
    "y": 1.1
  }, {
    "x": 75.5,
    "y": 1.7
  }, {
    "x": 74.5,
    "y": 1.7
  }, {
    "x": 74.5,
    "y": 1.1
  }]
};

下一步鼠标悬停而不是像这样选择所有多边形:

chart.selectAll("polygon")
        .attr("fill","orange");

选择触发它的那个并从数据中设置填充颜色(检查上面的悬停颜色是否已传递到数据中):

d3.select(this)
      .attr("fill", d.color);//fill color from the data defining the polygon.

工作代码 here