Question

我在for循环中创建了一些圆圈，我想在鼠标悬停在这些圆圈上时将这些圆圈的颜色更改为红色。 但是当鼠标失去对这些圈子的关注时，我希望它们保护鼠标悬停在它们之前的颜色。但是由于圈子是由for循环创建的，我不知道该怎么做那。

数组是：

analyzedUnique = [34675791162, 10132910658, 10588895486, 10609894726, 14794759174, 1790587656, 18895624430, 3610288229, 4170058208, 5550074705, 7600064469]

[1790587656: "blue", 3610288229: "orange", 4170058208: "blue", 34675091162: "blue", 10132910658: "orange", 10588895486: "orange", 10609894726: "orange", 14794759174: "blue"…]

checkCustomer数组是指定了颜色的人数，说明客户是否是工程师。

for (i = 0; i < numberOfCirclesShown - 2 ; i++) { 

  var circle  = svg.append("circle")

  .attr("cx", circleR + r - r * cosDegrees(alpha * (i+1)))

  .attr("cy", firstCircleY - r * sinDegrees(alpha * (i+1)))

  .attr("r", circleR)

  .style("fill", checkCustomer[analyzedUnique[i+2]]);

  circle.on("mouseover", function(){d3.select(this).style("fill", "red");})

  .on("mouseout", function(){d3.select(this).style("fill", **MUST PROTECT THE COLOR IT HAD**);});

}

我搜索了互联网，但无法得到结果。提前致谢。图片：The visualization is here

Answer 1

在您的情况下，我会使用.classed()属性

示例：

circle
    .on("mouseover", function(){d3.select(this).classed("fillCircle", true);})
    .on("mouseout", function(){d3.select(this).classed("fillCircle", false);});

你的css将是：

.fillCircle{
    fill: red !important;
  }

如果您像这样使用它，您将在悬停时添加该类并在mouseout上删除它

Answer 2

使用悬停伪类，然后您不需要记住任何内容。

＆＃13;

svg = d3.select("svg");

for (i = 0; i < 2 ; i++) { 

  var circle  = svg.append("circle")

  .attr("cx", 50 + i * 50)

  .attr("cy", 50)

  .attr("r", 20)

  .attr("fill", "blue");
}

＆＃13;

circle:hover {
    fill: red;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="100%" height="100%"></svg>

＆＃13;

另请注意，如果您使填充属性而不是样式，那么您不需要！重要。

Answer 3

Echonax的答案是有效的，但这更简单：给你的元素一个类：

circle.attr("class", "myCircle")

使用CSS：

.myCircle:hover {
    fill: whatever;
;

使用鼠标悬停方法时无法保护我的svg的颜色

3 个答案: