javascript - 在d3中使用选择器的后续样式(仅最后一个生效)

在下面的代码中，我想在svg circle事件发生时更改click元素的样式。问题在于，只要更改opacity之前，fill的更改就不会生效（仅最后一次更改生效）。

node.append("circle")
    .attr("r", function(d) {
        return nodeRadius;
    })
    .style("fill", "steelblue")
    .attr("class", "nodeCircle")
    .style("opacity", function(d) {
        return d.match;
    })
    .attr("id", function(d) {
        return d.id;
    })
    .on("click", function() {
        var neighbors = getNeighbours(this.id);
        d3.select('#' + this.id).style('fill', 'red');
        d3.select('#' + this.id).style('opacity', 1);
        d3.selectAll('.nodeCircle').transition().style('opacity', function() {
            var itrCircle = this;
            return (neighbors.indexOf(itrCircle.id) === -1) ? itrCircle.style.opacity : 1;
        });
        d3.selectAll('.nodeCircle').transition().style('fill', function() {
            var itrCircle = this;
            return (neighbors.indexOf(itrCircle.id) === -1) ? itrCircle.style.fill : 'red';
        });
    });

知道如何解决此问题以及为什么会发生这种情况吗？

最佳答案

在选择上创建过渡会取消所有现有过渡。因此，当您创建第二个时，您要取消第一个。要修复，只需链接样式更改：

d3.selectAll('.nodeCircle').transition()
  .style('opacity', function() {
        var itrCircle = this;
        return (neighbors.indexOf(itrCircle.id) === -1) ? itrCircle.style.opacity : 1;
  })
  .style('fill', function() {
        var itrCircle = this;
        return (neighbors.indexOf(itrCircle.id) === -1) ? itrCircle.style.fill : 'red';
  });