This is a tricky problem, and I'm not wholly sure you can do it in a performative way. You can see my static implementation here: http://jsfiddle.net/nrabinowitz/yPfJH/
and the dynamic implementation here, though it's quite slow and jittery: http://jsfiddle.net/nrabinowitz/9a7yy/
Notes on the implementation:
This works by masking each circle with all of the other circles in its group. You might be able to speed this up with collision detection.
Because each circle is both rendered and used as a mask, there's heavy use of
useelements to reference the circle for each node. The actual circle is defined in a
defelement, a non-rendered definition for reuse. When this is run, each node will be rendered like this:
<g class="node"> <defs> <circle id="circlelanguages" r="46" transform="translate(388,458)" /> </defs> <mask id="masklanguages"> <!-- show the circle itself, as a base --> <use xlink:href="#circlelanguages" fill="white" stroke-width="2" stroke="white"></use> <!-- now hide all the other circles in the group --> <use class="other" xlink:href="#circleenglish" fill="black"></use> <use class="other" xlink:href="#circlereligion" fill="black"> <!-- ... --> </mask> <!-- now render the circle, with its custom mask --> <use xlink:href="#circlelanguages" mask="url(#masklanguages)" style="fill: #ffffff; stroke: #1f77b4; " /> </g>
I put node circles, links, and text each in a different
gcontainer, to layer them appropriately.
You'd be better off including a data variable in your node data, rather than font size - I had to convert the
fontSizeproperty to an integer to use it for the circle radius. Even then, because the width of the text isn't tied to the data value, you'll get some text that's bigger than the circle beneath it.
Not sure why the circle for the first node isn't placed correctly in the static version - it works in the dynamic one. Mystery.
- enclosing the nodes of a d3 force directed graph in a circle or a polygon or a cloud
- Labels / text on the nodes of a D3 force directed graph
- Updating nodes and links with labels in d3 force directed network graph is not removing the nodes properly
- How do I group the nodes in a force directed graph
- d3.js Force Directed Graph - Using Images instead of Circles for the Nodes
- d3 force directed graph moving away on the svg, separating into group of nodes
- how to implement zoom in d3 graph of force directed layout and position the nodes
- semantic zooming of the force directed graph in d3
- How do I control the bounce entry of a Force Directed Graph in D3?
- Place pie charts on nodes of force directed layout graph in D3
- Adding label to the links in D3 force directed graph
- Circle packing within force graph nodes in D3?
- D3: How to create slow transition of circle radii for nodes in force directed graphs?
- What ever happend to the d3j.s force directed graph cluster example see on this image?
- D3v4 force directed graph - localStorage disconnects links and nodes
- how to add mouse events to force directed graph using the d3 canvas renderer?
- How can I determine the overall size of a force directed graph
- Dynamically adding nodes to d3.js Force directed graph
- Bounding the d3.js force directed graph
- How to restrict number of nodes initially in d3 Force directed graph
- d3.js force layout graph : how to build the nodes object from scratch?
- D3js - Force directed graph - advanced highlighting of neigbour nodes and links, is it possible?
- how to highlight(change color) of all connected(neighbours) nodes and links in a d3 force directed graph
- How to change color of nodes in force directed graph
- d3 force directed graph nodes stay at fixed position after filter
- D3 force directed graph issue: nodes are stacked at coordinate (0,0)
- force directed graph - width of link based on number of connections (volume) between nodes
- D3 Force Directed Graph nodes in order
- End points of the links of the force directed graph always stuck to left corner of the rectangular node
More Query from same tag
- TypeError: Cannot call method 'forEach' of undefined " in d3 js on MVC Razor
- Include custom library like D3js in ESlint configuration?
- best options for flowing dotted lines (svg path animation) in ie?
- Issue with D3.JS and Flask-trying to get map of U.S
- Building a binary state chart in billboard.js for multiple pieces of equipment
- for...in statement - what does arbitrary order mean
- D3.js - Add elements in HTML - <script></script> location
- creating a chloropleth of data science jobs in Germany with d3.js
- D3 positioning a custom SVG on scattersplot
- Svg element gets stuck from time to time after rounding x and y
- height should be of fixed size in responsive chart
- D3 Relative Position Logic, Selections, and Translating
- d3.js tooltips on path
- D3: zoom and pan with rect drag
- In d3js, is it possible to transition a fixed range of values on x-axis?
- How can you select and highlight all points on a line(s) using d3?
- Updating a D3 pie chart correctly
- D3.js labeled force graph does not reload data
- How to group X-axis points in react C3js?
- Hierarchy is returning heights and lengths that are NaN
- How can I rotate my text labels so they can't go upside-down (SVG)?
- Angular2-Seed + Typings + D3: Import error, 'Cannot find module 'd3''
- d3.js (svg) path directionality vs. marker-end, hive plots
- D3 exit transition: animation translate to left before remove
- Plotting IP addresses on axis
- What are unit testing strategies for D3JS?
- d3js step-after line graph - highlight line between two points on mouseover
- D3.js - merge two adjacency matrices in ones with D3/JS
- Topojson animating one flight