1

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

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

}

然后，我生成一个带有父 svg:g 的 svg，并将这些数据绑定到一系列挂在父项上的 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]
        });

};

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

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

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

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

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

 return [d.y, d.x]

但是如果我这样做，虽然控制点按照我的意愿定向，但点的位置不正常（即它们的 x/y 坐标也颠倒了，有效地翻译了它们。

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

4

1 回答 1

1

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

因此，如果您正在手动调整自定义布局并且想要水平定向贝塞尔控件（如示例），这就是您需要做的。

于 2012-12-17T16:49:59.953 回答