3d强制定向图-用图像替换节点 [英] 3d Force Directed Graph - Replacing Nodes with Images
本文介绍了3d强制定向图-用图像替换节点的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试找出使用图像表示节点而不是圆圈的最佳方法。
I am trying to figure out the best way to use images to represent nodes, instead of circles.
我正在以此为起点：
请参见以下代码：
See code below:
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
<script src="https://unpkg.com/d3-dsv"></script>
<script src="https://unpkg.com/d3-fetch"></script>
<script src="https://unpkg.com/3d-force-graph@1"></script>
<script src="https://unpkg.com/d3-octree"></script>
<script src="https://unpkg.com/d3-force-3d"></script>
<style>
body {
font-family: Sans-serif;
margin: 0;
}
</style>
</head>
<body>
<div id="3d-graph"></div>
<script>
const LEVELS_GAP = 80;
const HEIGHT_OFFSET = 200;
const NODE_REL_SIZE = 1;
d3.csv('d3-dependencies.csv').then(data => {
const nodes = [], links = [];
data.forEach(({ size, path }) => {
const levels = path.split('/'),
level = levels.length - .1,
module = level > 0 ? levels[1] : null,
leaf = levels.pop(),
parent = levels.join('/');
const node = {
path,
leaf,
module,
size: +size || 20,
fy: HEIGHT_OFFSET -level * LEVELS_GAP
};
nodes.push(node);
if (parent) {
links.push({ source: parent, target: path, targetNode: node });
}
});
const elem = document.getElementById('3d-graph');
ForceGraph3D()
.nodeRelSize(NODE_REL_SIZE)
.nodeId('path')
.nodeVal('size')
.nodeLabel('path')
.nodeAutoColorBy('module')
.nodeOpacity(0.9)
.linkColor(d => d.targetNode.color)
.onNodeHover(node => elem.style.cursor = node ? 'pointer' : null)
.onNodeClick(node => {
const levels = node.path.split('/');
if (levels.length > 2) { levels.splice(2, 0, 'tree/master/src'); } // Format github path
window.open(`https://github.com/${levels.join('/')}`, '_blank')
})
.d3Force('collision', d3.forceCollide(node => Math.cbrt(node.size) * NODE_REL_SIZE))
.graphData({ nodes: nodes, links: links })
(elem);
});
有人吗对于如何最好地实现这一目标有什么建议？我是一个初学者，仍在尝试找出解决此问题的最佳方法。
Does anyone have any recommendations on how to best achieve this? I am a beginner and am still trying to figure out the best way to go about this.
谢谢
推荐答案
从作为节点的文本开始文档，看起来您可以创建three.js精灵。在文档中，您可以看到如何加载图像。放在一起：
From the text as nodes documentation, looks like you can create three.js sprites. From the documentation you can see how to load an image. Putting it together:
<head>
<style> body { margin: 0 } </style>
<script src="//unpkg.com/three"></script>
<script src="//unpkg.com/three-spritetext"></script>
<script src="//unpkg.com/3d-force-graph"></script>
</head>
<body>
<div id="3d-graph"></div>
<script>
const Graph = ForceGraph3D()
(document.getElementById('3d-graph'))
.jsonUrl('//rawgit.com/vasturiano/3d-force-graph/master/example/datasets/miserables.json')
.nodeAutoColorBy('group')
.nodeThreeObject(node => {
var map = new THREE.TextureLoader().load( "https://picsum.photos/100/100/?random" );
map.minFilter = THREE.LinearFilter;
var material = new THREE.SpriteMaterial( { map: map } );
var sprite = new THREE.Sprite( material );
sprite.scale.set(32,32,1);
return sprite;
});
// Spread nodes a little wider
Graph.d3Force('charge').strength(-150);
</script>
</body>
这篇关于3d强制定向图-用图像替换节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
