score:27
Accepted answer
Here is a straightforward way to do this:
var edges = [];
json.Links.forEach(function(e) {
var sourceNode = json.Nodes.filter(function(n) {
return n.Id === e.Source;
})[0],
targetNode = json.Nodes.filter(function(n) {
return n.Id === e.Target;
})[0];
edges.push({
source: sourceNode,
target: targetNode,
value: e.Value
});
});
force
.nodes(json.Nodes)
.links(edges)
.start();
var link = svg.selectAll(".link")
.data(edges)
...
Here is a working PLUNK. (You should fork it to be safe, in case I inadvertently delete it.)
Source: stackoverflow.com
Related Query
- D3 force layout - linking nodes by name instead of index
- D3 force layout that moves branches in tree instead of nodes
- Simple graph of nodes and links without using force layout
- d3.js: "Cannot read property 'weight' of undefined" when manually defining both nodes and links for force layout
- Avoid collision between nodes and edges in D3 force layout
- D3 Force Layout Graph - Self linking node
- Update existing nodes in a d3 Force Layout
- Space out nodes evenly around root node in D3 force layout
- d3js create a force layout with fixed nodes
- Stop Force Layout on d3js and start free dragging nodes
- D3 force layout: How to index data by its ID instead of its index in "nodes" array
- How do I change nodes to be rectangles instead of circles in a d3 force layout?
- d3.js: How to remove nodes when link-data updates in a force layout
- Place pie charts on nodes of force directed layout graph in D3
- Adding nodes dynamically to D3 Force Layout in version 4
- d3 force layout nodes always start at top-left of screen
- D3 force layout graph with nodes positioned in a grid
- Detecting visible nodes in d3.js force layout after zoom-pan
- D3 Linking nodes based on names rather than index
- Reposition nodes in a multi-foci d3 force layout
- Dragging nodes with labels in d3 v4 force layout glitches
- d3js (v4) canvas force layout with text on nodes
- D3.js how do I arrange nodes of a force layout to be on a circle
- Speed up d3 force layout with many nodes and links
- reading nodes and edges from two distinct csv files using Force Layout
- D3js force layout - line with gradient between nodes
- Circle packs as nodes of a D3 force layout
- Force layout inside force layout: How to drag inner nodes
- d3 force collapsible layout - start page with all nodes collapsed
- Log the x,y coordinates of nodes in a converged D3 force layout
More Query from same tag
- checking for DOM attribute of svg elements using d3.js
- responsive d3 area graph stretches circle interaction points
- Karma/Jasmine unit test for D3 svg element
- How to avoid hardcoding of colors in D3
- Interaction with updated/entered elements
- How to adjust event.pageY to my new modal dialog?
- How to achieve that bubbles are only clickable if completly zoomed d3js
- Forced-Directed Graph and localstorage
- How to pass multivalue data to a choropleth in dc.js
- Multiseries line chart with mouseover tooltip
- How to overlay color in d3 area chart
- Removing a certain line inside a generated html code using javascript
- How to switch position of D3 SVG elements
- Convert sub-array of objects with key-value pairs into array of arrays
- Working D3 And Crossfilter for generating graph
- Multiple Y axes in nvd3 scatter graph
- d3js: supply a function to tickPadding
- Sorting an array by another index array
- Draw the progress path from right to left in semi circle donut chart using d3js
- JSON based coloring of nodes in sankey.js
- d3 single node moving with cursor repelling other nodes
- How to Create different kinds of grid lines using D3 in the same graph
- Looking for a way to display labels on sunburst chart (could not find a working example)
- styling the browser generated rollovers for svg title tags
- get value of checked radio button using d3.js
- Large dataset crashes my browser
- d3.js - Add background rectangle on force directed diagram groups
- Setting Range, mouse over in nvd3 bullet chart
- D3 horizontal Barchart using react-d3-components package
- wrong date printing on x axis of line graph in d3 with extra tick