d3在节点中强制布局链接位置

弗兰·吉梅内斯

我一直在阅读有关d3力布局的几个问题,但是我还没有找到答案,所以我将其发布。

我正在使用D3库,特别是力设计。我没有为节点添加预定义的形状,而是创建了自己的形状,例如圆形,矩形等。

var shapes = {
        star : "m 0 0 l 23 12 l -4 -26 l 19 -19 l -27 -4 l -11 -23 l -12 23 l -27 4 l 19 19 l -4 26 l 24 -12",
        rect : "M 0 0 L 0 "+ rect_size + "L "+ 2 * rect_size + " "+ rect_size + " L "+ 2 * rect_size + " 0 L 0 0",
        vertical_rect : "M 0 0 L 0 "+ 2 * rect_size + "L "+ rect_size + " "+ 2 * rect_size + " L "+ rect_size + " 0 L 0 0",
        circle: "M 0 0 A "+ radius + " " + radius +" 0 1 0 0.00001 0 Z"
        };
var dummy_nodes = {};
var dummy_shapes = {"A" : shapes.circle, "B" : shapes.rect, "C" : shapes.rect, "D" : shapes.circle};

    // Compute the distinct nodes from the links.
links.forEach(function (link) {
        link.source = dummy_nodes[link.source] || (dummy_nodes[link.source] = 
                                                    { name: link.source, shape: dummy_shapes[link.source]});
        link.target = dummy_nodes[link.target] || (dummy_nodes[link.target] = 
                                                    { name: link.target,shape: dummy_shapes[link.target]});
    });
var force = d3.layout.force()
        .nodes(d3.values(dummy_nodes))
        .links(links)
        .size([960, 500])
        .linkDistance(200)
        .charge(-1500)
        .on("tick", tick)
        .start();
var svg = d3.select("body").append("svg:svg")
        .attr("width", w)
        .attr("height", h);
var node = svg.append("svg:g").selectAll(".node")
        .data(force.nodes())
        .enter().append("path")
        .attr("class", "node")
        .attr("d", function(n){ return n.shape})
        .on("dblclick", dblclick)
        .call(drag);

您可以在此处查看整个代码

我不明白如何更改图的链接(或边)进入每个节点的位置。

例如:我希望从矩形节点出来的边缘位于矩形的中心,而不是左上角(我猜是位置0,0)。我现在肯定有一些与SVG中每种形状的CX和CY相关的东西,但这是我无法掌握的。

我希望我的问题很清楚,随时问我可能遗漏的任何问题

谢谢!

罗伯特·朗森

只需将形状的中心作为原点即可,而不是将rect定义为

   rect : "M 0 0 L 0 "+ rect_size + "L "+ 2 * rect_size + " "+ rect_size + " L "+ 2 * rect_size + " 0 L 0 0",

定义为

   rect : "M " + -rect_size + " " + (-rect_size / 2) + " h " + 2 * rect_size + " v " + rect_size + " h "+ (-2 * rect_size) + " z",

我已经从L切换到h,v和z,因此更简单。您可以对其他形状执行相同的操作。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

d3强制定向布局-在不更改节点位置的情况下绘制链接

来自分类Dev

D3强制布局应在单击节点时添加节点和链接

来自分类Dev

D3强制布局:链接和节点--- z-index(?)

来自分类Dev

D3强制布局:根据节点半径沿链接移动箭头

来自分类Dev

D3强制布局-按名称而不是索引链接节点

来自分类Dev

D3强制布局:链接和节点--- z-index(?)

来自分类Dev

D3 js强制布局:使用链接参数设置节点半径

来自分类Dev

D3强制定向布局+所有节点到原始位置

来自分类Dev

更新位置后,D3强制链接未与节点连接

来自分类Dev

D3强制布局:如何设置每个节点的大小?

来自分类Dev

d3强制使用节点组进行布局

来自分类Dev

D3强制布局节点属性未正确更新

来自分类Dev

如何替换d3强制布局中的节点?

来自分类Dev

d3以可预测的顺序强制布局节点

来自分类Dev

将节点放置在d3强制布局的屏幕中央

来自分类Dev

D3强制布局,其中较大的节点聚集在中心

来自分类Dev

D3js强制布局更新节点和链接

来自分类Dev

D3强制定向布局-单击按钮时更改节点颜色及其链接颜色

来自分类Dev

将鼠标悬停在强制布局d3中的节点上时连接的链接线动画

来自分类Dev

将鼠标悬停在强制布局d3中的节点上时连接的链接线动画

来自分类Dev

更改d3强制布局链接样式以匹配d3树外观

来自分类Dev

在D3强制布局中,在根节点周围均匀地隔开节点

来自分类Dev

D3强制布局-如何实现节点的3D外观?

来自分类Dev

D3强制布局DIV与SVG

来自分类Dev

删除D3强制布局的动画

来自分类Dev

无法在d3强制布局中可视化节点

来自分类Dev

D3强制布局将根节点固定在中心

来自分类Dev

D3 JS-强制图-删除节点后不重新启动布局

来自分类Dev

d3强制布局节点始终从屏幕左上方开始

Related 相关文章

  1. 1

    d3强制定向布局-在不更改节点位置的情况下绘制链接

  2. 2

    D3强制布局应在单击节点时添加节点和链接

  3. 3

    D3强制布局:链接和节点--- z-index(?)

  4. 4

    D3强制布局:根据节点半径沿链接移动箭头

  5. 5

    D3强制布局-按名称而不是索引链接节点

  6. 6

    D3强制布局:链接和节点--- z-index(?)

  7. 7

    D3 js强制布局:使用链接参数设置节点半径

  8. 8

    D3强制定向布局+所有节点到原始位置

  9. 9

    更新位置后,D3强制链接未与节点连接

  10. 10

    D3强制布局:如何设置每个节点的大小?

  11. 11

    d3强制使用节点组进行布局

  12. 12

    D3强制布局节点属性未正确更新

  13. 13

    如何替换d3强制布局中的节点?

  14. 14

    d3以可预测的顺序强制布局节点

  15. 15

    将节点放置在d3强制布局的屏幕中央

  16. 16

    D3强制布局,其中较大的节点聚集在中心

  17. 17

    D3js强制布局更新节点和链接

  18. 18

    D3强制定向布局-单击按钮时更改节点颜色及其链接颜色

  19. 19

    将鼠标悬停在强制布局d3中的节点上时连接的链接线动画

  20. 20

    将鼠标悬停在强制布局d3中的节点上时连接的链接线动画

  21. 21

    更改d3强制布局链接样式以匹配d3树外观

  22. 22

    在D3强制布局中,在根节点周围均匀地隔开节点

  23. 23

    D3强制布局-如何实现节点的3D外观?

  24. 24

    D3强制布局DIV与SVG

  25. 25

    删除D3强制布局的动画

  26. 26

    无法在d3强制布局中可视化节点

  27. 27

    D3强制布局将根节点固定在中心

  28. 28

    D3 JS-强制图-删除节点后不重新启动布局

  29. 29

    d3强制布局节点始终从屏幕左上方开始

热门标签

归档