Question

我正在使用D3创建一个sankey图表。我正在尝试使用其他节点和链接重绘图表，并使用转换将上一个图表设置为新图表的动画。我能够添加新节点和链接，但旧节点和链接没有改变位置。由于可以在图中的任何位置添加新节点和链接，因此我不想清除和重绘整个svg，而是使用transition从旧图获取到新图。绘制sankey图的代码是：

function draw(data){
    // Set the sankey diagram properties
    var sankey = d3sankey()
        .nodeWidth(17)
        .nodePadding(27)
        .size([width, height]);

    var path = sankey.link();
    var graph = data;

    sankey.nodes(graph.nodes)
        .links(graph.links)
        .layout(32);

    sankey.relayout();

    // add in the links
    link.selectAll(".link")
        .data(graph.links)
        .enter().append("path")
        .attr("class", "link")
        .attr("d", path)
        .style("fill", "none")
        .style("stroke", function(d){
            return "grey";
        })
        .style("stroke-opacity", "0.4")
        .on("mouseover", function() { d3.select(this).style("stroke-opacity", "0.7") } )
        .on("mouseout", function() { d3.select(this).style("stroke-opacity", "0.4") } )
        .style("stroke-width", function (d) {
            return Math.max(1, d.dy);
        })
        .sort(function (a, b) {
            return b.dy - a.dy;
        });

    link.transition().duration(750);
    //link.exit();

    // add in the nodes
    var node = nodes.selectAll(".node")
        .data(graph.nodes)
        .enter().append("g")
        .attr("class", "node")
        .attr("transform", function (d) {
            return "translate(" + d.x + "," + d.y + ")";
        });

    // add the rectangles for the nodes
    node.append("rect")
        .attr("height", function (d) {
            return d.dy;
        })
        .attr("width", sankey.nodeWidth())
        .style("fill", function (d) {
            return d.color = color(d.name.replace(/ .*/, ""));
        })
        .style("fill-opacity", ".9")
        .style("shape-rendering", "crispEdges")
        .style("stroke", function (d) {
            return d3.rgb(d.color).darker(2);
        })
        .append("title")
        .text(function (d) {
            return d.name + "\n" + format(d.value);
        });

    // add in the title for the nodes
    node.append("text")
        .attr("x", -6)
        .attr("y", function (d) {
            return d.dy / 2;
        })
        .attr("dy", ".35em")
        .attr("text-anchor", "end")
        .attr("text-shadow", "0 1px 0 #fff")
        .attr("transform", null)
        .text(function (d) {
            return d.name;
        })
        .filter(function (d) {
            return d.x < width / 2;
        })
        .attr("x", 6 + sankey.nodeWidth())
        .attr("text-anchor", "start");

    node.transition().duration(750);

}

JSFiddle

是否可以使用转换添加新节点以及链接和重新定位旧节点和链接？

谢谢！

Answer 1

我能够通过移动节点和链接到新位置来实现这一点。代码是：

var nodes = d3.selectAll(".node")
                .transition().duration(750)
                .attr('opacity', 1.0)
                .attr("transform", function (d) {
                    if(d.node == 3){
                        console.log(d.x, d.y);
                    }
                    return "translate(" + d.x + "," + d.y + ")";
                });

var nodeRects = d3.selectAll(".node rect")
    .attr("height", function (d) {
        if(d.node == 3){
            console.log(d.dy);
        }
        return d.dy;
    })


var links = d3.selectAll(".link")
                .transition().duration(750)
                .attr('d', path)
                .attr('opacity', 1.0)

更新了JSFiddle

D3 Sankey图：添加新节点和转换链接

1 个答案: