If you split up the data entry block and define a variable for
var links = svg.selectAll('line.link') .data(data.link) .enter()
You can append multiple different things the selection you have defined as
links. You aren't adding more elements to the lines, per se, but rather adding elements to the selections that you are adding the lines to, corresponding to adding shapes to lines in a one to one ratio.
I've modified your fiddle to add a circle to the middle of each line.
If you want to only add elements to the black lines, you can use a filter to do so by creating a new data set and operating on that.
- Adding label to the links in D3 force directed graph
- Dynamically adding nodes to d3.js Force directed graph
- d3.js adding a triangles on lines in force-directed graph
- Adding zoom function to a force directed graph
- Adding nodes group by group to a D3 force directed graph
- Adding text labels to force directed graph links in d3.js
- Vertically center a label consisting of multiple lines over a node in D3 force directed graph
- Issues with adding a link via mouse click to two nodes in force directed graph
- d3 v4 adding new nodes to force directed graph
- Highlight selected node, its links, and its children in a D3 force directed graph
- Updating links on a force directed graph from dynamic json data
- Add text label to d3 node in Force directed Graph and resize on hover
- D3 force directed graph with drag and drop support to make selected node position fixed when dropped
- Add text/label onto links in D3 force directed graph
- semantic zooming of the force directed graph in d3
- Adding and Removing Nodes in D3js Force Graph
- 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
- D3 Force Directed Graph ajax update
- Introducing Arrow(directed), in Force Directed Graph d3
- Prevent node overlap in force directed graph
- How do I control the bounce entry of a Force Directed Graph in D3?
- d3 force directed graph downward force simulation
- D3js Force Directed Graph Link not found
- enclosing the nodes of a d3 force directed graph in a circle or a polygon or a cloud
- Place pie charts on nodes of force directed layout graph in D3
- Zooming and brushing in d3 force directed graph
- Force Directed Graph Error, "Cannot Read Property 'Push' of Undefined"
- how to stop movement of force directed graph on force.start
More Query from same tag
- Fable D3 map sample
- How to display values in Stacked Multi-bar chart - nvd3 Graphs
- Set leaf nodes' size d3.treemap
- Not default json format for nvd3 or d3
- D3+Leaflet Circle SVG element not displaying any color
- SortBy doesn't work in datatable dc.js
- If condition never met and hence my bars in a simple bar chart are always blue, while I want them to be red for values below a certain number
- Is there any code assist editor?
- d3 force layout: Does d3 require some order in the nodes to work correctly?
- Existing Triangles Cannot be Removed
- Get all xy coordinates of 4 corners of svg image - D3
- d3 enter/exit pattern with array of objects
- Self invoking anonymous functions
- I can't see my svg shape even though it exists in DOM
- How to plot degree on spiral chart using d3.js
- NVD3: multiChart wrong format for series
- Use D3 to generate designed organic shapes like this dynamically?
- D3.js - Line Graph: Area path goes over x and y axis on zoom
- How to prevent click event for mouseup event
- Insert text inside Circle in D3 chart
- How can i get the new X and Y position after rotating?
- D3 Line and Path - graph line doesn't show
- sorting bars in d3.js doesn't change bar position
- d3.js - How to add url link in for collapsible indented tree
- Mouseover to display/hide force layout links
- D3 - Unable to get data parameter on click event
- How to add space between axis and line in D3 line chart?
- consolidating data from a json in a new array and drawing shapes with it using d3.js
- Collapsible tidy horizontal tree from obervablehq migrated to html is rendering only a single large node in the middle