介绍Arrow（定向），强制定向图d3 [英] Introducing Arrow(directed), in Force Directed Graph d3

问题描述

我在此处的示例中使用了力导向图 - http://bl.ocks.org / mbostock / 4062045

但是由于我的数据是定向的，我需要图中的链接来表示为箭头连接。也许像是， http://bl.ocks.org/d3noob/5141278 。

有人可以建议创建有向图的变更或添加，如 http://bl.ocks.org/mbostock/4062045

我是D3的新手，我找不到

解决方案

合并这两个例子很简单，我创建了一个< a href =http://jsfiddle.net/mdml/ncwuej9j/> JSFiddle to demo 。首先，将箭头样式的定义添加到SVG：

  //创建箭头。 
 svg.append（svg：defs）。selectAll（marker）
 .data（[end]）//不同的链接/路径类型可以在这里定义
。 enter（）。append（svg：marker）//这部分添加箭头
 .attr（id，String）
 .attr（viewBox，0 -5 10 10 ）
 .attr（markWidth，6）
 .attr（refX，15）
 .attr（refY，-1.5） markHeight，6）
 .attr（orient，auto）
 .append（svg：path）
 .attr（d，M0，-5L10， 0L0,5）; 
  

然后只需将标记添加到链接

  .attr（marker-end，url（#end））; 
  

您最终得到的结果如下：

看到一些箭头比其他箭头大，因为不是所有的链接都有相同的 stroke-width 。如果你想让所有的箭头相同的大小，只需修改

  .style（stroke-width ）{return Math.sqrt（d.value）;}）
  

p>

I am using the force-directed graph in the sample here - http://bl.ocks.org/mbostock/4062045

But since my data is directed, I need the links in the graph to be represented as arrow connections. Maybe like in, http://bl.ocks.org/d3noob/5141278.

Can someone please suggest the alterations or additions that create a directed graph as in http://bl.ocks.org/mbostock/4062045

I am new to D3, and I couldn't find a solution, maybe its trivial, but a little help is appreciated.

解决方案

Merging these two examples is straightforward, and I created a JSFiddle to demo. First, add the definition of the arrow style to the SVG:

// build the arrow.
svg.append("svg:defs").selectAll("marker")
    .data(["end"])      // Different link/path types can be defined here
  .enter().append("svg:marker")    // This section adds in the arrows
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 15)
    .attr("refY", -1.5)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
  .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");

Then just add the marker to your links

.attr("marker-end", "url(#end)");

You end up with something like this:

You'll see that some arrows are bigger than others, because not all links have the same stroke-width. If you want to make all the arrows the same size, just modify

.style("stroke-width", function(d) { return Math.sqrt(d.value); })

when adding the links.

这篇关于介绍Arrow（定向），强制定向图d3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！