javascript - 贝塞尔曲线控制点方向 d3

Question

我正在从 D3 手动制作网络图(我不喜欢 Force Directed 的输出)。为此，我生成了一个节点数组，每个节点都有一个 x/y 坐标。

{
    "nodes" : [
        {
            "name" : "foo",
            "to"   : ["bar"]
        },
        {
            "name" : "bar",
            "to"   : ["baz"]
        },
        {
            "name" : "baz"
        }
    ]

}

然后，我生成一个带有父级 svg:g 的 svg，并将该数据绑定(bind)到一系列卡在父级上的 svg:g 元素。

addSvg = function () {
    // add the parent svg element
    return d3.select('#visualisation')
        .append('svg')
        .attr('width', width)
        .attr('height', height);
};

addSvgGroup = function (p) {
    // add a containing svg:g
    return p.append('svg:g').
        attr('transform', 'translate(0,0)');
};

addSvgNodes = function(p, nodes) {
    // attach all nodes to the parent p data
    // and render to svg:g
    return p.selectAll('g')
        .data(nodes)
        .enter()
        .append('svg:g')
        .attr('class', 'node');
};

然后我手动定位节点(稍后这将是动态的，我刚刚站稳脚跟)

transformNodes = function (nodes) {
    // position nodes manually
    // deprecate later for column concept
    nodes.attr('transform', function (o, i) {
        offset = (i + 1) * options.nodeOffset;
        // options.nodeOffset = 150
        o.x = offset;
        o.y = offset / 2;
        return 'translate(' + offset + ',' + offset / 2 + ')';
    });
};

然后，我将这些项目附加到父级 svg:g，并在其上挂上一些文本。 这会导致 svg 中的文本从左到右呈阶梯状下降。到目前为止，一切顺利。

接下来，我想生成一些链接，因此我使用一种方法来确定当前节点是否有关系，然后获取该节点的位置。最后，我使用 d3.svg.diagonal 生成一系列链接，并将其源/目标设置为适当的节点。为了清晰起见，手写。

getLinkGenerator = function (o) {
    return d3.svg.diagonal()
        .source(o.source)
        .target(o.target)
        .projection(function (d) {
            console.log('projection', d);
            return [d.x, d.y]
        });

};

现在，到目前为止，一切都很好 - 除了贝塞尔曲线的控制 handle 不在我想要的位置。例如从节点 A 到节点 B 的路径 d 属性如下:

 <path d="M150,75C150,112.5 300,112.5 300,150" style="fill: none" stroke="#000"></path>

但我希望它改变控制 handle 的方向 - 即

 <path d="M150,75C200,75 250,150 300,150" style="fill: none" stroke="#000"></path>

这将使其看起来更像示例页面中的树状图。我在可折叠树状图示例中注意到它返回轴的反转:

 return [d.y, d.x]

但是如果我这样做，虽然控制点的方向符合我的意愿，但这些点的位置就不正常了(即它们的 x/y 坐标也被反转，从而有效地平移了它们。

还有其他人遇到过这样的问题或知道如何解决它吗？

Answer 1

好的，所以我看了一下这个并找到了解决方案。似乎某些布局(树状图、折叠树)正在反转路径链接中源/目标的坐标，以便当它们命中投影调用时，它们会反转回正确的位置，但方向为他们的贝塞尔点旋转。

因此，如果您正在手动启动自定义布局并且想要水平定向贝塞尔曲线控件(如示例)，那么这就是您需要做的。