Question

我正在d3.js上工作，我一直试图从json文件创建网络图。该文件的内容如下：

{  "nodes": [{"id": "site01", "x": 317.5, "y": 282.5},
{"id": "site02", "x": 112, "y": 47},
{"id": "site03", "x": 69.5,"y": 287},
{"id": "site04", "x": 424.5, "y": 99.5},
],
"links": [
{"node01": "site01", "node02": "site04", "amount": 10},
{"node01": "site03", "node02": "site02", "amount": 120},
{"node01": "site01", "node02": "site04", "amount": 50},
{"node01": "site04", "node02": "site02", "amount": 80}]
}

我已经能够读取文件并在x和y位置创建节点。但是，当我尝试在节点之间创建长度为“数量”的链接时，我无法读取与节点相对应的x和y值。我已经尝试了一些功能

var canvas = d3.select("body")
        .append("svg")
        .attr("width",1000)
        .attr("height",800);

canvas.selectAll("circle")
        .data(data.nodes)
        .enter()
        .append("circle")
        .attr("cx", function (d) {return d.x; })
        .attr("cy", function(d) {return d.y; })
        .attr("r",25);

 canvas.selectAll("line")
        .data(data.links)
        .enter()
        .append("line")
        .attr("x1", function (d) {return d.node01;})
        .attr("y1", function (d) {return d.node01;})
        .attr("x2", function (d) {return d.node02;})
        .attr("y2", function (d) {return d.node02;})
        .style("stroke","#aaa")
        .linkDistance(function(d) {return d.amount;});

我还阅读了其他帖子，但似乎都没有用。能否请您提出对该程序的修复建议。我主要想访问相应节点的x和y值。

使用节点和链接在D3中创建网络图

0 个答案: