如何使用d3制作简单的有向图

Question

I am trying to create a simple force layout directed-edge graph base on this D3.js example " http://bl.ocks.org/1153292 ".

There is line where it says .data(["suit", "licensing", "resolved"]) but I have no clue what that means. I have to admit I don't fully understand the details of it.

I have looked at a few so questions but none was helpful.

I would really appreciate it if

1. sb can tell what ".data(["suit", "licensing", "resolved"])" means.

2. How are arrows added to the end of the edges.

Answer 1

1. The join is creating markers for those three types, to customize how CSS will style the display of each edge.
2. In link , source and target have special meanings. Each target is drawn with an arrowhead during path assignment.