链接转换

Question

我正试图在D3中链接转换，我无法弄清楚如何使其正常工作。我已经阅读了一些例子，我觉得我在选择方面缺少一些东西（可能是因为我的选择是跨越不同的层次）。

您可以在下面看到一个示例，单击“目标”可以将光脉冲设置为“服务”节点的动画。一旦脉冲到达，我希望服务节点通过转换填充到橙色。目前我知道我的选择会填满两个圈子 - 我很快就会解决这个问题。

然而，当脉搏到来时，没有任何事情发生：

var t0 = svg.transition();

var t1 = t0.selectAll(".pulse")
    .duration(2000)
    .ease("easeInOutSine")
    .attr("cx", function(d) { return d.x2; })
    .attr("cy", function(d) { return d.y2; });

t1.selectAll(".node")
  .style("fill", "#F79646");

我似乎能够获得更改的唯一方法是将代码的最后一位更改为：

t0.selectAll(".node")
  .style("fill", "#F79646");

然而，这会导致节点立即填充，而不是等待脉冲到达。感觉选择不是“扩展”选择.node实例，但我不太确定

var nodes = [
    { x: 105, y: 105, r: 55, color: "#3BAF4A", title: "Objectives" }, 
    { x: 305, y: 505, r: 35, color: "#F79646", title: "Service" }
];
var links = [
    { x1: 105, y1: 105, x2: 305, y2: 505 }   
];

var svg = d3.select("svg");
var relationshipLayer =svg.append("g").attr("id", "relationships");
var nodeLayer = svg.append("g").attr("id", "nodes");

// Add the nodes
var nodeEnter = nodeLayer.selectAll("circle").data(nodes).enter();
    
var nodes = nodeEnter.append("g")
                     .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")";})
                     .on("click", function (d) {
                         d3.select(this)
                            .select("circle")
                             .transition()
                             .style("stroke", "#397F42")
                             .style("fill", "#3BAF4A");
                         
                         pulse(d); 
                     });

var circles = nodes.append("circle")
                    .attr("class", "node")
                    .attr("r", function (d) { return d.r; })
                    .style("fill", "#1C1C1C")
                    .style("stroke-width", "4px")
                    .style("stroke", function (d) { return d.color; });

var texts = nodes.append("text")
                 .text(function (d) { return d.title; })
                 .attr("dx", function(d) { return -d.r / 2; })
                 .style("fill", "white");

function pulse(d) {
    function distanceFunction(x1, y1, x2, y2) {
      var a = (x2 - x1)  * (x2 - x1);
      var b = (y2 - y1) * (y2 - y1);
      return Math.sqrt(a + b);
    };
    
    var lineFunction = d3.svg.line()
        .x(function (d) { return d.x; })
        .y(function (d) { return d.y; })
        .interpolate("linear");   
    
    var lines = relationshipLayer
                    .selectAll("line")
    .data(links)
    .enter()
    .append("line")
    .attr("x1", function(d) { return d.x1; })
    .attr("y1", function(d) { return d.y1; })
    .attr("x2", function(d) { return d.x2; })
    .attr("y2", function(d) { return d.y2; })
    .attr("stroke-dasharray", function(d) { return distanceFunction(d.x1, d.y1, d.x2, d.y2); })
    .attr("stroke-dashoffset", function(d) { return distanceFunction(d.x1, d.y1, d.x2, d.y2); });
    
    var pulse = relationshipLayer
            .selectAll(".pulse")
            .data(links)
            .enter()
            .append("circle")
            .attr("class", "pulse")
            .attr("cx", function(d) { return d.x1; })
            .attr("cy", function(d) { return d.y1; })
            .attr("r", 50);
    
    lines.transition()
        .duration(2000)
        .ease("easeInOutSine")
        .attr("stroke-dashoffset", 0);
    
    var t0 = svg.transition();
        
    var t1 = t0.selectAll(".pulse")
        .duration(2000)
        .ease("easeInOutSine")
        .attr("cx", function(d) { return d.x2; })
        .attr("cy", function(d) { return d.y2; });
    
    t1.selectAll(".node")
      .style("fill", "#F79646");
};

svg {
    background: #222234;
    width: 600px;
    height: 600px;
    font-size: 10px;
    text-align: center;
    font-family: 'Open Sans', Arial, sans-serif;
}
circle {
    fill: url(#grad1);
}
line {
    fill: none;
    stroke: #fff;
    stroke-width: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg id="svg">
    <defs>
        <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
            <stop offset="5%" style="stop-color:rgb(255,255,255); stop-opacity:1" />
            <stop offset="10%" style="stop-color:rgb(255,255,255); stop-opacity:0.8" />
            <stop offset="20%" style="stop-color:rgb(255,255,255); stop-opacity:0.6" />
            <stop offset="60%" style="stop-color:rgb(255,255,255);stop-opacity:0.0" />
        </radialGradient>
    </defs>
</svg>

Answer 1

您没有看到第二次转换的更改的原因是它未应用于任何内容。第一次转换的选择包含类pulse的所有元素，然后您从第一个选择的元素中选择具有类node 的元素。没有包含两个类的元素，因此您的选择为空，并且更改不应用于任何元素。

通常，您无法在更改选择时以您当前使用的方式进行链转换。相反，使用转换的.each()事件处理程序，它允许您安装在转换完成时执行的处理程序函数。在您的情况下，这将是这样的：

svg.selectAll(".pulse")
    .transition()
    .duration(2000)
    .ease("easeInOutSine")
    .attr("cx", function(d) { return d.x2; })
    .attr("cy", function(d) { return d.y2; })
    .each("end", function() {
        svg.selectAll(".node")
            .transition()
            .duration(2000)
            .style("fill", "#F79646");
    });

这将选择所有具有类node的元素，并通过转换将其填充更改为橙色。

上述代码存在两个问题 - 首先，正如您已经观察到的那样，它会更改所有节点的填充而不仅仅是目标，其次是{{1}事件处理程序是为转换中的每个元素执行的，而不仅仅是一次。对于您的特定示例，这不是一个问题，因为您只有一个动画链接，但如果您有多个，则该函数（以及转换）将被执行多次。

使用相同的代码可以很容易地修复这两个问题。我们的想法是过滤end元素的选择，使其仅包含该行的目标。这样做的一种方法是将线的目标坐标与选择中元素的坐标进行比较：

node

处理函数的参数svg.selectAll(".pulse") .transition() .duration(2000) .ease("easeInOutSine") .attr("cx", function(d) { return d.x2; }) .attr("cy", function(d) { return d.y2; }) .each("end", function(d) { svg.selectAll(".node") .filter(function(e) { return e.x == d.x2 && e.y == d.y2; }) .transition() .duration(2000) .style("fill", "#F79646"); }); 是绑定到正在转换的元素的数据，其中包含目标坐标。在d行之后，选择将仅包含该行移向的圆。只要目标不同，对多行执行此代码是安全的。

完整演示here。