Question

我对D3.js很陌生，我想绘制一个空间和力布局图。我有来自this exemple的代码（＆＃34; d3v4-selectable-zoomable-force-directed-graph＆＃34;），它非常适合缩放和平移。

在此之前，我采用了基本代码（来自Mike Bostock的Force-Directed Graph），并在this method之后的边缘添加了箭头。

好吧，现在我的问题是合并两者。我尝试没有任何结果来添加缩放到基本的D3.js力布局示例，所以我试图在边缘上添加箭头到第二个，但它根本不起作用：/

基本上，我已经下载了＆＃34; d3v4-selectable-zoomable-force-directed-graph＆＃34;上例。我已经添加了这段代码：

    svg.append("defs").append("marker")
    .attr("id", "arrow")
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 20)
    .attr("refY", 0)
    .attr("markerWidth", 8)
    .attr("markerHeight", 8)
    .attr("orient", "auto")
  .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");
// code //
  var link = svg.append("g")
      .attr("class", "links")
    .selectAll("line")
      .data(graph.links)
    .enter().append("line")
      .attr("stroke", function(d) { return color(d.type); })
      .attr("marker-end", "url(#arrow)");

我认为这与边缘和箭头的移动和缩放问题以及属性的丢失有关，但我担心我无法单独处理它。你们有些人有什么想法吗？

谢谢！

D3v4中可选择的可缩放力定向图，带有箭头

0 个答案: