Question

我修改了此代码：http://jsfiddle.net/LjsnD/以包含鼠标悬停效果，但群集中有一些颜色出血。有没有更好的方法来实现这一点，而不是重复研究代码？ https://jsfiddle.net/sjp700/pten28uy/2/

var grads2 = svg.append("defs").selectAll("radialGradient2")
      .data(nodes)
     .enter()
      .append("radialGradient")
      .attr("gradientUnits", "objectBoundingBox")
      .attr("cx", 0)
      .attr("cy", 0)
      .attr("r", "100%")
      .attr("id", function (d, i) { return "grad2" + i; });

    grads2.append("stop")
        .attr("offset", "0%")
        .style("stop-color", "white");

    grads2.append("stop")
        .attr("offset", "100%")
        .style("stop-color", function (d) {
            console.log(d.cluster);

            return color2(d.cluster);
        });

Answer 1

问题：ID 的是唯一的。

在您的代码中，您正在复制某些ID。对于grads，您可以使用以下代码设置ID：

grads.attr("id", function (d, i) { return "grad" + i; });

而且，对于您的grads2，您使用了这个：

grads2.attr("id", function (d, i) { return "grad2" + i; });

现在让我们看看：如果i为21到grad且i为1到grad2，会发生什么？您将拥有两个相同的ID：

grad + 21//gives you 'grad21'
grad2 + 1//gives you 'grad21'

解决方案很简单：改用字母：

grads.attr("id", function (d, i) { return "gradA" + i; });
grads2.attr("id", function (d, i) { return "gradB" + i; });

这是您更新的小提琴：https://jsfiddle.net/gerardofurtado/gs6eem6m/1/

带有圆形渐变效果的悬停问题

1 个答案: