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

Question

在下面的代码中，我想在发生click事件时更改svg Circle元素的样式。问题是，只要在更改 fill 之前更改 opacity 就不会生效(只有最后的更改才会生效)。

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

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

Answer 1

在选择上创建过渡会取消任何现有过渡。因此，当您创建第二个时，您将取消第一个。要修复此问题，只需链接样式更改即可:

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