Simplify examples

Author: vasturiano

example/highlight/index.html

@@ -35,26 +35,19 @@
         });
       };
 
-      _paintNode = (node, ctx) => {
+      _paintRing = (node, ctx) => {
         const { NODE_R } = HighlightGraph;
-        const { highlightNodes } = this.state;
-
-        if (highlightNodes.indexOf(node) !== -1) { // add ring
-          ctx.beginPath();
-          ctx.arc(node.x, node.y, NODE_R * 1.4, 0, 2 * Math.PI, false);
-          ctx.fillStyle = 'red';
-          ctx.fill();
-        }
 
+        // add ring just for highlighted nodes
         ctx.beginPath();
-        ctx.arc(node.x, node.y, NODE_R, 0, 2 * Math.PI, false);
-        ctx.fillStyle = 'midnightblue';
+        ctx.arc(node.x, node.y, NODE_R * 1.4, 0, 2 * Math.PI, false);
+        ctx.fillStyle = 'red';
         ctx.fill();
       };
 
       render() {
         const { NODE_R } = HighlightGraph;
-        const { data, highlightLink } = this.state;
+        const { data, highlightNodes, highlightLink } = this.state;
 
         return <ForceGraph2D
           ref={el => { this.fg = el; }}
@@ -63,7 +56,8 @@
           linkWidth={link => link === highlightLink ? 5 : 1}
           linkDirectionalParticles={4}
           linkDirectionalParticleWidth={link => link === highlightLink ? 4 : 0}
-          nodeCanvasObject={this._paintNode}
+          nodeCanvasObjectMode={node => highlightNodes.indexOf(node) !== -1 ? 'before' : undefined}
+          nodeCanvasObject={this._paintRing}
           onNodeHover={this._handleNodeHover}
           onLinkHover={this._handleLinkHover}
         />;

example/text-links/index-3d.html

@@ -22,34 +22,21 @@
           graphData={data}
           nodeLabel="id"
           nodeAutoColorBy="group"
+          linkThreeObjectExtend={true}
           linkThreeObject={link => {
-            // create line object
-            const lineObj = new THREE.Line(
-              new THREE.BufferGeometry(),
-              new THREE.MeshLambertMaterial({
-                color: '#f0f0f0',
-                transparent: true,
-                opacity: 0.2
-              })
-            );
-
-            // add text sprite as child
+            // extend link with text sprite
             const sprite = new SpriteText(`${link.source} > ${link.target}`);
             sprite.color = 'lightgrey';
             sprite.textHeight = 1.5;
-            lineObj.add(sprite);
-
-            return lineObj;
+            return sprite;
           }}
-          linkPositionUpdate={(obj, { start, end }) => {
+          linkPositionUpdate={(sprite, { start, end }) => {
             const middlePos = Object.assign(...['x', 'y', 'z'].map(c => ({
               [c]: start[c] + (end[c] - start[c]) / 2 // calc middle point
             })));
 
-            const textSprite = obj.children[0];
-
-            // Position link text
-            Object.assign(textSprite.position, middlePos);
+            // Position sprite
+            Object.assign(sprite.position, middlePos);
           }}
         />,
         document.getElementById('graph')