D3 Pack Layout在缩放时转换路径

时间:2015-05-20 21:23:24

标签: javascript svg d3.js

我试图将D3 Pack Layout与链接结合起来。它工作在初始状态,但当我尝试缩放svg路径元素的位置时不会更新。如何在用户执行缩放时转换路径以使它们与节点对齐?下面是我的缩放功能。 要查看整个代码,请参阅js fiddle。我希望有人可以帮助我!

function zoom(d, i) {
    var k = r / d.r / 2;
    x.domain([d.x - d.r, d.x + d.r]);
    y.domain([d.y - d.r, d.y + d.r]);

    var t = vis.transition()
        .duration(d3.event.altKey ? 7500 : 750);

    t.selectAll("circle")
        .attr("cx", function(d) {
            return x(d.x);
        })
        .attr("cy", function(d) {
            return y(d.y);
        })
        .attr("r", function(d) {
            return k * d.r;
        });

    t.selectAll("text")
        .attr("x", function(d) {
            return x(d.x);
        })
        .attr("y", function(d) {
            return y(d.y);
        })
        .style("opacity", function(d) {
            return k * d.r > 20 ? 1 : 0;
        });

    console.log(t.selectAll('path'));
    d3.selectAll('path')
        .attr('class', function() {
            // TODO: diversify
            return 'child-branch';
        })
        .style('stroke', function(d) {
            return d3.rgb(d3.scale.category20(d.target.by_alliance_with + 1)).darker();
        })
        .attr('d', function(d) {
            console.log("d", d);
            return linkArc(d);
        });

0 个答案:

没有答案