D3 in Action Chapter 11 - Example 6
This example demonstrates a hybrid rendering technique for large-scale network visualizations, using 3,000 nodes connected by roughly 1,000 random links. It first draws the nodes as red SVG circles, which retain mouse interactivity, while simultaneously rendering the edges on an overlay HTML5 Canvas for performance. A force-directed layout, driven by `d3.layout.force()`, updates node positions on each tick, clearing the canvas and redrawing the link strokes before repositioning the SVG circles. The approach balances interactivity with animation speed, leveraging both the Canvas `getContext("2d")` API and D3’s selection logic.
AI-generated descriptionThis is the code for Chapter 11, Figure 10 from D3.js in Action which uses mixed mode rendering to improve network performance via drawing nodes with SVG while drawing edges with HTML5 Canvas. This allows you to maintain mouse events on your nodes while dramatically improving animation performance.
forked from <a href='http://bl.ocks.org/emeeks/'>emeeks</a>'s block: <a href='http://bl.ocks.org/emeeks/e330141d1279c6115a3a'>Canvas / svg mixed mode</a>