score:3
we can change your original array to an array without duplicates, and containing the number of original duplicates. we're gonna use that number to set the width of the links.
so, if this is your array:
var links = [{
"source": a,
"target": b
}, {
"source": a,
"target": b
}, {
"source": b,
"target": a
}, {
"source": b,
"target": c
}];
let's first put all the properties of each object in order:
links.foreach(function(d) {
var sourcetemp = d.source, targettemp = d.target;
if (d.source > d.target) {
d.source = targettemp;
d.target = sourcetemp;
}
});
then, we'll count how many links are equal:
var counter = {};
links.foreach(function(obj) {
var key = json.stringify(obj);
counter[key] = (counter[key] || 0) + 1
});
and, then, we'll populate your final array:
var finalarray = [];
for (var key in counter) {
var tempkey = key.substring(0, key.length - 1) + ",\"value\":" + counter[key] + "}";
finalarray.push(tempkey)
};
as i used json.stringify
for counting the duplicated objects, let's parse it:
finalarray.foreach(function(d, i, array) {
array[i] = (json.parse(d))
})
so, at the end, if you log your finalarray
, you'll get this:
[
{"source": "a","target": "b","value": 3},
{"source": "b","target": "c","value": 1}
];
finally, define finalarray
as the data for the links and use the value
to set the width of your links:
.style("stroke-width", d => d.value)
check the console in this demo, using your original array:
var links = [{
"source": "a",
"target": "b"
}, {
"source": "a",
"target": "b"
}, {
"source": "b",
"target": "a"
}, {
"source": "b",
"target": "c"
}];
links.foreach(function(d) {
var sourcetemp = d.source, targettemp = d.target;
if (d.source > d.target) {
d.source = targettemp;
d.target = sourcetemp;
}
});
var counter = {};
links.foreach(function(obj) {
var key = json.stringify(obj);
counter[key] = (counter[key] || 0) + 1
});
var finalarray = [];
for (var key in counter) {
var tempkey = key.substring(0, key.length - 1) + ",\"value\":" + counter[key] + "}";
finalarray.push(tempkey)
};
finalarray.foreach(function(d, i, array) {
array[i] = (json.parse(d))
})
console.log(finalarray);
Source: stackoverflow.com
Related Query
- force directed graph - width of link based on number of connections (volume) between nodes
- force directed graph - why pointers change size along with the link width
- D3js Force Directed Graph Link not found
- Optimize d3 force directed layout, via charge/gravity properties, based on number of nodes
- How to restrict number of nodes initially in d3 Force directed graph
- D3 Collapsible force directed graph with non-tree data - link alignment
- D3js force directed graph change strength of connections
- D3.js Force Directed Graph with Json - Create graph specifying link distance from all nodes
- Issues with adding a link via mouse click to two nodes in force directed graph
- Why Can I not Get D3 Force Directed Graph Link Labels to work
- 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
- 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
- how to prevent overlapping of link in force directed graph?
- Introducing Arrow(directed), in Force Directed Graph d3
- Constructing Force Directed Graphs From Only Link Data
- d3 force directed layout - link distance priority
- 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
- enclosing the nodes of a d3 force directed graph in a circle or a polygon or a cloud
- I want to distinguish the link of d3.js force graph by the thickness
- Place pie charts on nodes of force directed layout graph in D3
More Query from same tag
- Completed a row before a selectall
- Javascript object sort and slice
- D3 Graph working in chromium, but not in other browsers
- Complex JSON to D3js stacked time series
- Adding points of map as one layer
- recursive d3 animation issue
- How to set symbols in a legend?
- Error: <path> attribute d: Expected number D3
- Get the center of an arc path and get the x and y that relates to in screen coords
- Cannot wait until DOM rendering has finished in Angular/Jasmine unit test
- d3 bar chart with brush
- Nested arrays in JSON with D3
- How to remove fade when hovering in networkD3 graph in R
- How to show c3.js No data but with legend for empty column?
- Color code LineString drawing using D3.js
- d3 radial tree bug with degenerate trees
- SVG - Create a path to join midpoints of group of circles and further extend till circumference points of first & last circle
- datamaps plot lines from ajax response
- D3.js - How to solve NAN error while dragging the line graph (Jsfiddle provided)
- How can I successfully load dimple.js when require.js is present?
- Omitting the initial transition/animation
- visualizing a mapping in d3js- model to be used
- Dynamic variable selection in r2d3
- D3 Mouseover Not Firing
- How do I update a D3 SVG chart based on user input
- d3 js - how to invert d3.extent
- date data is null, when i try to use parse to define time format
- d3 SVG translate and scale one group but only translate the other
- d3.js accessing the DOM on ready document
- Locating the nodes according to the coordinates in the json