Javascript d3中具有不同翻滚动作的多个多边形

我正在尝试将几个多边形转换为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");
    });

.attr("fill", function(d, i) { return (i === 0) ? "steelblue" : "red";})

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

这会将所有“鼠标上…”效果应用于所有多边形。为每个多边形指定不同“鼠标上…”操作的最佳方法是什么？例如，我想在鼠标上方将

poly

的颜色切换为

orange

，但在鼠标上方将

poly2

的颜色切换为

red

。

---

这是我的，但我只能将相同的操作分配给两个多边形。

这样做的一种方法是根据每个多边形的索引为其分配类：

.attr("class", function(d, i) {return i})

d是数据，i是索引，所以我们返回每个多边形的索引作为类。这让我们可以做这样的事情：

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

.attr("fill", function(d, i) { return (i === 0) ? "steelblue" : "red";})

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

---

因此，在您所拥有的内容中，类似这样的内容：。

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

大概是这样的：

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

.attr("fill", function(d, i) { return (i === 0) ? "steelblue" : "red";})

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

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

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

.attr("fill", function(d, i) { return (i === 0) ? "steelblue" : "red";})

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

选择触发该选项的选项，并从数据中设置填充颜色（选中数据中传递的悬停颜色）：

---

工作代码

谢谢，它工作得很好！但是如果我想添加

.on（“mouseover”，loadnewdata）

其中

函数loadnewdata（）{chart.select（.line”）.datum（data）.attr（“class”，“line”）.attr（“d”，newdata）；}

将新数据加载到其中一个图形上，该怎么办？是否可以使用相同的方法？如何将函数

loadnewdata

分配给

poly

属性？我正在尝试类似于

loadnewdata的东西：“loadnewdata”

在我指定颜色后，它不起作用。不确定你所说的多边形属性是什么意思。你能不能给我一把小提琴来解释一下你试图实现什么，以及什么是破坏性的。我刚刚让它起作用。我分别加载了每个多边形：

chart3。选择all（“polygon1”）…

和

chart3。选择all（“polygon2”）…

，然后只使用

。在（“mousedown”）上，第一个加载新数据1

，在（“mousedown”上，第二个加载新数据2。