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

这适用于所有＆＃34;鼠标......＆＃34;对所有多边形的影响。什么是在鼠标上分配不同的最佳方式...＆＃34;每个多边形的动作？例如，我希望poly在鼠标悬停时将颜色切换为orange，但是poly2在鼠标悬停时将red变为metadata.get("title")。这是我的Live Demo，但我只能为那里的两个多边形分配相同的动作。

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

Answer 2

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

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

d是数据而i是索引，因此我们将每个多边形的索引作为类返回。这允许我们做这样的事情：

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

所以你拥有的东西是这样的：https://jsfiddle.net/szjn7u1v/3/。

多个多边形在d3中具有不同的翻转动作

2 个答案: