Currently I am using d3.scalePoint to position nodes within locations, which spread along the X-axis. This is mostly great, but sometimes reaches 2000px wide and may reach a lot more as the database expands.
example: fiddle.
So I've reached a point that is beyond my meagre skillset. What I'd like is a certain location to be at the centre (the one the user uses to call the data), with the rest of the locations spread around (either semicircle/circle). Then each location to have a force that draws nodes in.
I found this example, but it uses individual forces for each larger node, I think I'd need something a bit more automatic.
The JSON from the database is pretty much like this:
`{"locations":
[
{"name": "Cochlear", "id": 1},
{"name": "DCN", "id": 2},
{"name": "AVCN", "id": 3},
{"name": "PVCN", "id": 4}
];
"cells": [
{"id": "IHC", "location": 1},
{"id": "OHC", "location": 1},
{"id": "Type I SGN", "location": 1},
{"id": "Type II SGN", "location": 1},
{"id": "Pyramidal", "location": 2},
{"id": "Stellate", "location": 2},
{"id": "Cartwheel", "location": 2},
{"id": "Unipolar Brush", "location": 2},
{"id": "Golgi", "location": 2},
{"id": "Granule", "location": 2},
{"id": "Giant", "location": 2},
{"id": "Tuberculoventral", "location": 2},
{"id": "Spherical", "location": 3},
{"id": "Globular", "location": 3},
{"id": "T-Stellate", "location": 3},
{"id": "D-Stellate", "location": 3},
{"id": "Planar","location": 4},
{"id": "Octopus","location": 4},
{"id": "Radiate","location": 4}
],
"links": [
{"source": "IHC", "target": "Type I SGN", "type": "E"},
{"source": "OHC", "target": "Type II SGN", "type": "E"},
{"source": "Type I SGN", "target": "Pyramidal", "type": "E"},
{"source": "Type I SGN", "target": "Tuberculoventral", "type": "E"},
{"source": "Pyramidal", "target": "Stellate", "type": "E"},
{"source": "Granule", "target": "Cartwheel", "type": "E"},
{"source": "Stellate", "target": "Cartwheel", "type": "I"},
{"source": "Cartwheel", "target": "Cartwheel", "type": "I"},
{"source": "Granule", "target": "Unipolar Brush", "type": "E"},
...
];`
So can I use the "location" attribute in cells to link them to the "id" attribute in locations or would I need "source:... target:..." data to create links to pull them in.
If you're still reading, the background is a neural connectivity diagram that shows where specific types of neurons receive and send signals. So if you have any ideas on improving it from that perspective, I'm open to them.
Edit: I've realised I should be able to use the 'cells' data as links data as well, using location as source and id as target. Just need to get my head round implementing it.
Further update: After a fair bit of playing around and reading more about the forces, I don't think D3 will link nodes that are in separate arrays, so the locations above can't be linked to the nodes that are in a separate array. At least not while the data is in its current format.
Final Update: So I've got a workaround using a timeOut, let d3 render the locations as nodes, then grab the cx and cy values to set as force points for the cells. It is probably not the best solution, but it seems to work pretty well. Now I just need to speed up the rendering of the locations.