Question

我遇到了d3js和强制定向布局的一些问题：

如果linkStrength（）设置为0，则链接很弱。但更改它不会改变任何内容。

当我拖动一个节点时，其他节点不会移动......

编辑：

我发现通过将数据更改为经典的整数索引数组，一切正常！ 我不知道为什么键值数组或对象不起作用......

这是我的代码：

tick =  ->
    link
    .attr "x1", (d) ->
        nodes[d.source].x
    .attr "y1", (d) ->
        nodes[d.source].y
    .attr "x2", (d) ->
        nodes[d.target].x
    .attr "y2", (d) ->
        nodes[d.target].y

circles
    .attr "cx", (d) ->
        d.x
    .attr "cy", (d) ->
        d.y


nodes_values = d3.values nodes

force = d3.layout.force()
    .nodes nodes_values
    .links links
    .size([width, height])
    .charge(-120)
    .linkDistance(30)
    .on 'tick', tick
    .start()

link = svg.selectAll(".link")
    .data links
    .enter()
    .append("line")
    .attr("class", "link")
    .attr "marker-end", "url(#arrow)"




groups = svg.selectAll(".node")
    .data nodes_values
    .enter()
    .append 'g'


circles = groups
    .append("circle")
    .attr("class", "node")
    .attr "r", (d)-> 
        if d.weigth
            return d.weigth * 5
        else 
            return 5
    .style "fill", (d) -> color d.group
    .call(force.drag)

数据看起来像：

链接：

"[
 {
  "source": "xxxx.xxxx@xxxxx.xx",
  "target": "NIWT",
 },
 {
  "source": "yyyyy.yyyyy@yyyyyy.yyy",
  "target": "NIUT",
 }
]"

节点：

 {
        "xxxxx.xxxxx@xxxxx.xxx" : {
            "name":"xxxxx.xxxxx@xxxxx.xxx",
            "group":"Operateurs",
            "weight":0,
            "x":386.20246469091313,
            "y":282.4477932203487,
            "px":386.337157279126,
            "py":282.4570376593727,
        },
        "yyyyy.yyyyy@yyyyy.yyyy": {
            "name":"yyyyy.yyyyy@yyyyy.yyyy",
            "group":"Operateurs",
            "weight":0,
            "x":853.3548980089732,
            "y":395.80903774295444,
            "px":853.2517240837253,
            "py":395.7616750529105
        }
    }

你有什么想法吗？

Answer 1

问题出在您传递给力布局的链接数组中。

链接的源和目标值需要是指向实际节点数据对象的指针，而不仅仅是字符串ID。这样，当d3强制布局扫描链接数组时，它可以访问数据对象并根据链接强度调整x和y值。

要修复，您需要添加一个额外的例程来遍历您的链接数组，并使用字符串从您的节点hashmap中提取数据对象。

var links_pointers = links.map(function(link){
       return {source:nodes[link.source], target:nodes[target.source]};
    });

var nodes_values = d3.values(nodes);

force = d3.layout.force()
    .nodes(nodes_values)
    .links(links_pointers)
    /* etc. */

然后，您当然可以使用links_pointers数组作为link选择的数据，并相应地更改您的tick函数（使用d.source.x代替nodes[d.source].x等。）

D3js强制有向图linkStrength被阻止为0

1 个答案: