diff options
Diffstat (limited to 'app/components/graph/graph.tsx')
-rw-r--r-- | app/components/graph/graph.tsx | 57 |
1 files changed, 50 insertions, 7 deletions
diff --git a/app/components/graph/graph.tsx b/app/components/graph/graph.tsx index b11eb9b..8b041b5 100644 --- a/app/components/graph/graph.tsx +++ b/app/components/graph/graph.tsx @@ -285,7 +285,7 @@ onLinkHover={handleLinkHover} if (highlightNodes.size === 0) { return "rgb(100, 100, 100, 1)" } else { - return highlightNodes.has(node) ? "purple" : "rgb(50, 50, 50, 0.5)" + return highlightNodes.has(node) ? "#a991f1" : "rgb(50, 50, 50, 0.5)" } } : (node) => { @@ -327,7 +327,7 @@ onLinkHover={handleLinkHover} if (highlightLinks.size === 0) { return "rgb(50, 50, 50, 0.8)" } else { - return highlightLinks.has(link) ? "purple" : "rgb(50, 50, 50, 0.2)" + return highlightLinks.has(link) ? "#a991f1" : "rgb(50, 50, 50, 0.2)" } } : (link) => @@ -407,13 +407,13 @@ onLinkHover={handleLinkHover} d3AlphaMin={physics.alphaTarget} d3VelocityDecay={physics.velocityDecay} onBackgroundClick={handleBackgroundClick} + backgroundColor={"#242730"} /> ) : ( <ForceGraph3D ref={fgRef} graphData={!physics.local ? gData : localGraphData} //graphData={gData} - nodeAutoColorBy={physics.colorful ? "id" : undefined} nodeColor={ !physics.colorful ? (node) => { @@ -423,10 +423,39 @@ onLinkHover={handleLinkHover} return highlightNodes.has(node) ? "purple" : "rgb(50, 50, 50, 0.5)" } } - : undefined + : (node) => { + if (node.neighbors.length === 1 || node.neighbors.length === 2) { + return [ + "#ff665c", + "#e69055", + "#7bc275", + "#4db5bd", + "#FCCE7B", + "#51afef", + "#1f5582", + "#C57BDB", + "#a991f1", + "#5cEfFF", + "#6A8FBF", + ][node.neighbors[0].index % 11] + } else { + return [ + "#ff665c", + "#e69055", + "#7bc275", + "#4db5bd", + "#FCCE7B", + "#51afef", + "#1f5582", + "#C57BDB", + "#a991f1", + "#5cEfFF", + "#6A8FBF", + ][node.index % 11] + } + } } - linkAutoColorBy={physics.colorful ? "target" : undefined} - //linkAutoColorBy={(d) => gData.nodes[d.source].id % GROUPS} + //linkAutoColorBy={physics.colorful ? ((d) => gData.nodes[d.sourceIndex].id % GROUPS) : undefined} linkColor={ !physics.colorful ? (link) => { @@ -436,7 +465,20 @@ onLinkHover={handleLinkHover} return highlightLinks.has(link) ? "purple" : "rgb(50, 50, 50, 0.2)" } } - : undefined + : (link) => + [ + "#ff665c", + "#e69055", + "#7bc275", + "#4db5bd", + "#FCCE7B", + "#51afef", + "#1f5582", + "#C57BDB", + "#a991f1", + "#5cEfFF", + "#6A8FBF", + ][gData.nodes[link.sourceIndex].index % 11] } linkDirectionalParticles={physics.particles} nodeLabel={(node) => node.title} @@ -472,6 +514,7 @@ onLinkHover={handleLinkHover} nodeThreeObjectExtend={true} onNodeClick={selectClick} onBackgroundClick={handleBackgroundClick} + backgroundColor={"#242730"} /> )} </View> |