score:9
Arrows
To add arrows at the end of the line you need to define a marker using SVG. Only slight modifications are required to update the d3 v3 code to do this with v4. The example you provided sets up three arrow definitions (one for each type of relationship) but to create a single one you can use this:
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");
The values of markerWidth
, markerHeight
, refX
, refY
are significant and determine the placement of the markers - unfortunately I don't know how they interplay with the viewBox
or the circle radius so these were selected by trial and error.
No need to capture the marker as a variable because it will be referred to using a URL specifier as follows:
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)");
Labels
Again, slight modifications to the v3 code will work. Text labels need to be appended to the SVG separately, not as children of the nodes, and translated independently in the ticked
function.
To set up the labels:
var text = svg.append("g").attr("class", "labels").selectAll("g")
.data(graph.nodes)
.enter().append("g");
text.append("text")
.attr("x", 14)
.attr("y", ".31em")
.style("font-family", "sans-serif")
.style("font-size", "0.7em")
.text(function(d) { return d.id; });
And then to translate them to the right location when the force simulation ticks:
function ticked() {
// ...
text
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
}
The horizontal offset is defined by the value of x
when setting up the labels (14 in this case).
Together
See this fiddle for the complete example.
Source: stackoverflow.com
Related Query
- D3 4.0 Graph with directed edges and labels
- Updating nodes and links with labels in d3 force directed network graph is not removing the nodes properly
- D3 force directed graph with drag and drop support to make selected node position fixed when dropped
- D3 Force Graph With Arrows and Curved Edges - shorten links so arrow doesnt overlap nodes
- How to show edges in force directed graph using d3.js and Angular?
- d3.js How to draw a directed graph with one node start and one node end
- d3.js horizontal bar graph with positive and negative values - move y axis labels to far left side of graph
- Force Directed Graph with expand and collapse (d3.js)
- Create a Line graph with Dots and Labels using 2 different data sets
- Highlight selected node, its links, and its children in a D3 force directed graph
- Add text label to d3 node in Force directed Graph and resize on hover
- Is there a tap and double tap event in d3.js force directed graph
- D3 highlight selected node, and its links to parent and ancestors in a force directed graph
- Labels / text on the nodes of a D3 force directed graph
- How can I show a graph using d3 force layout with initial positions set and no movement at all?
- D3 updating graph with new elements create edges with the wrong nodes
- nvd3.js-Line Chart with View Finder: rotate axis labels and show line values when mouse over
- Zooming and brushing in d3 force directed graph
- How to calculate in-degree, out-degree and weigted degree for force directed graph (d3.js)?
- d3 gauge chart with labels and percentages?
- Legend with smooth gradient and corresponding labels
- How to check d3 js force graph for nodes with no links and remove them?
- d3.js Force Directed Tree with Labels
- Starting Transitions and Animations With Area Graph in D3.JS
- Freezing force directed network graph and make draggable in D3
- Both single and double click on a node in d3 force directed graph
- Collapsible D3 force directed graph with non-tree data
- D3 v4 force directed graph with rectangles
- How do I make a d3.js force directed graph interactive using ajax and python?
- D3v4 force directed graph - localStorage disconnects links and nodes
More Query from same tag
- Return compiled text in d3's text() or html() method
- How do I append the text tag to just one svg e.g. svg tag with "id=50"?
- How to prevent the drag if the user clicks the round in d3.js?
- D3.csv accessor function for loop
- Ticks not showing up for a multi-series d3 svg chart
- NVD3 add a border/stroke to area chart
- JS filter array but do not filter if reverse present
- D3 creating bar chart from big csv
- dc-js line chart showing extra filled line at average change
- Why is the line in my D3 chart inverting?
- Updating chart.ygrids in Billboard.js does not update the class
- Selecting country ID from topoJSON (D3)
- How can I pass json data returned from a webservice into D3.json(...)?
- Loading in multiple CSVs and storing them each in an individual array
- d3 svg zoom does not work when neighbouring element exists
- Unable to update nodes position using d3 force and Svelte
- Data joins in d3; I must not be understanding selections and/or data key functions properly
- D3: Zooming/Panning Line Graph in SVG is not working in Canvas
- Javascript plugin for graph rendering (tree and nodes)
- Using the zoom and pan functionality of d3
- What does d3.select(this) return?
- D3 - Finding an SVG Element with the same data
- How to bind text to svg rect?
- Can I access bound data without D3?
- Line chart axis zoom
- dc js - Histogram using dc js
- Get Selected Slice Color from Pie chart using DC.js
- How to render table from JSON array elemnts using d3
- How to add click event on d3.js child of collapsible tree?
- Rotated bar chart data label format