链式跃迁

Question

我试图在.node中建立一个转换链，但我不太清楚如何使它正常工作。我已经阅读了一些例子，我觉得我遗漏了一些关于选择的东西(可能是因为我的选择跨越了不同的层)。

您可以在下面看到一个示例，单击“目标”应该会使“服务”节点产生一个脉冲光。一旦脉冲到达，我希望服务节点用一个转换填充到橙色。目前，我意识到我的选择将填补这两个圈子-我会很快解决这个问题。

然而，所发生的是，当脉搏到达时，什么都不会发生：

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的所有元素，并通过转换将它们的填充更改为橙色。

上面的代码有两个问题--第一，正如您已经观察到的，它改变了所有节点的填充，而不仅仅是目标，其次，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是绑定到正在转换的元素的数据，该元素包含目标坐标。在filter()行之后，所选内容将只包含直线移动到的圆圈。只要目标不同，多行多次执行此代码是安全的。

完整的演示这里。