随着过渡而消退

Question

在this D3 force layout example中，徘徊的消退突然完成：

如何逐步淡化通讯节点？我试图在几个地方调用transition（），但到目前为止没有运气。

与过渡最相关的当前代码如下：

function fade(opacity) {
    return function(d) {
        node.style("stroke-opacity", function(o) {
                thisOpacity = isSameCluster(d, o) ? 1 : opacity;
                this.setAttribute('fill-opacity', thisOpacity);
                return thisOpacity;
            });
    };
};

function isSameCluster(a, b) {
     return a.cluster == b.cluster;
};

和

var node = svg.selectAll("circle")
    .data(nodes)
   .enter()
    .append("circle")
    .style("fill", function(d, i) {
        return "url(#grad" + i + ")";
    })
    // .style("fill", function(d) { return color(d.cluster); })
    .call(force.drag)
    .on("mouseover", fade(.1))
    .on("mouseout", fade(1));

node.transition()
    .duration(750)
    .delay(function(d, i) { return i * 5; })
    .attrTween("r", function(d) {
      var i = d3.interpolate(0, d.radius);
      return function(t) { return d.radius = i(t); };
    });

Answer 1

问题是你要设置两个属性/样式值，其中一个使用非D3方法，因此不会选择任何转换。有两种方法你可以做到这一点，我可以想到我的头脑。首先，使用.each()：

node.each(function(o) {
            thisOpacity = isSameCluster(d, o) ? 1 : opacity;
            d3.select(this).transition().duration(1000)
                .style("stroke-opacity", thisOpacity)
                .style('fill-opacity', thisOpacity);
        });

或者，您可以单独设置值。此代码可能更直观，但您必须两次计算群集分配：

node.transition().duration(1000)
        .style("fill-opacity", function(o) { return isSameCluster(d, o) ? 1 : opacity; })
        .style("stroke-opacity", function(o) { return isSameCluster(d, o) ? 1 : opacity; });

完成演示here和here。