javascript - 将 d3 力图的线放在前景中

Question

我找不到将 d3js 力导向图的线置于前台的方法。我希望我的 div(图形的节点)位于线的后面。我可以更改 div 的不透明度，但这不是我想要的，我可以将 div 的 z-index 更改为负数，但这使得它们无法拖动...

有人知道解决方案吗？

我这里有一个 fiddle : https://jsfiddle.net/5jgrf5h8/

//create a svg in the body of index.html
var svg = d3.select("body").append("svg")
  .classed("simulation", 1)
  .attr("width", width)
  .attr("height", height);

//setting the links

var glink = svg.append("g")
.attr("class", "links")
.selectAll("links")
.data(links).enter();

var link = glink.append("polyline")
.attr("stroke-width", 2);



//setting the nodes. they will be div elements
var node = d3.select("body")
  .append("div")
  .attr("class", "nodes")
  .selectAll(".node")
  .data(nodes)
  .enter().append("div")
  .attr("class", "node")
  .attr("id", function(d){return d.id;})
  .style("background", function(d) { return color(d.group); });

Answer 1

我的一个解决方案基于两个前提:

1. 定位元素出现在未定位元素的前面。

2. 绘制顺序影响分层

因此，两个快速更改应该可以解决此问题。在你的 CSS 中:

svg { position: absolute; }

然后只需在 svg 之前附加 .node div。

Updated fiddle.

如果需要拖动方框，还可以将 svg 的指针事件设置为无 - different updated fiddle .