在d3强制布局中设置链接

Question

我正在尝试使用节点和链接设置d3力可视化。 我的节点显示正确，但是链接出现问题。 有人可以看看我的json文件，然后看看我的代码，并指导我完成显示链接的过程吗？

这是json数据（链接的源和目标在底部）：

https://api.myjson.com/bins/4t8na

这是可视化的代码：

  <script type= "text/javascript"> var w = 1000, h = 650; var svg = d3.select("body").append("svg") .attr("height", 0) .attr("width", 0) .style("border", "1px solid black"); var data; // a global var force = d3.layout.force() .size([w, h]) .linkDistance([150]) .charge([-1050]) .gravity(0.5) .on("tick", tick); var svg = d3.select("body").append("svg") .attr("width", w) .attr("height", h); var circles = svg.selectAll(".node"); d3.json("https://api.myjson.com/bins/1rnhq", function(error, json) { if (error) return console.warn(error); data = json; var nodes = data; console.log(data); force.nodes(data)//.links() .start(); // Update nodes. circles = circles.data(data); circles.exit().remove(); var nodeEnter = circles.enter().append("g") .attr("class", "node") .style("fill", "#000") .style("opacity", 0.75) .on("mouseover", mouseover) .on("mouseout", mouseout) .on("click", click) .call(force.drag); nodeEnter.append("circle") .attr("r", function(d) { return d.sector == "Academia" ? 1:5 }); nodeEnter.attr("cursor", "pointer"); //Update links var links = svg.selectAll(".link") .data(data.links) .enter().append("line") .attr("class", "link") .style("stroke-width", "1px"); links.exit().remove(); function mouseover() { d3.select(this).select("circle").transition() .duration(250) .attr('r', 10); } function mouseout() { d3.select(this).select("circle").transition() .duration(250) .attr('r', 5); } nodeEnter.append("text") .attr("text-anchor", "middle") .style("font-size", ".75em") .attr("dy", "-0.85em").text(function (d) { return d.name }); var tooltip = svg.append("rect") .attr("x", 1000) .attr("y", 0) .attr("width", 900) .attr("height", 700) .attr("opacity", 0.85); function click() { d3.select(tooltip).transition() .duration(450) .attr("x", 650) }; }); function tick() { links.attr("x1", function(d) { return d.source.x; }) .attr("y1", function(d) { return d.source.y; }) .attr("x2", function(d) { return d.target.x; }) .attr("y2", function(d) { return d.target.y; }); circles.attr("transform", function(d) { return "translate(" + dx + "," + dy + ")"; }); }; // create svg nodes for each json object: "sector" // create svg nodes for each json object: "name" // load links.json // create svg links from links json file // style links // sort json objects by projects // get google map: coastal virginia // sort json objects: "name" by geography // get googe map US </script> 

Answer 1

我相信问题在于data.links不存在，您拥有的是data[#].links 。 因此，当您在var links = ...上执行.data(data.links)时，您将在其中传递undefined属性。

尝试这个：

var links = svg.selectAll(".link")
            .data(data)
            // ...

Answer 2

主要问题在于JSON链接内部，您具有以下值：

{"source":52,"target":28},{"source":52,"target":29},{"source":52,"target":30},{"source":52,"target":31}

但是没有索引为52的Node，因此所有内容在加载时都中断了。 但是您的代码还有很多其他错误，例如

circles.exit().remove();//this is incorrect coz circles in your case is not a selection

还有很多 ：）

这里的工作代码

希望这可以帮助！