Question

您好我已经解决了将图像作为节点强制定向的几个问题和可能的解决方案。但是他们所有人都要随机摆放或者一张图像。有什么办法可以将特定图像分配给特定节点吗？基本上我是动态创建并从数据库中获取数据。任何帮助将受到高度赞赏。

Answer 1

嗨，只需点击加载按钮即可获得您想要的样本http://jsfiddle.net/elviz/V6Qr8/91/

function loadImage() {
    if (LoadData) {
        root = {
            "name": "physics",
                "imageURL": "",
                "type": "user",
                "children": [{
                "name": "DragForce",
                    "imageURL": "",
                    "size": 1082,
                    "type": "user"
            }, {
                "name": "GravityForce",
                    "imageURL": "",
                    "size": 1336,
                    "type": "user"
            }, {
                "name": "IForce",
                    "imageURL": "",
                    "size": 319,
                    "type": "user"
            }, {
                "name": "NBodyForce",
                    "imageURL": "",
                    "size": 10498,
                    "type": "user"
            }, {
                "name": "Node 1",
                    "imageURL": "",
                    "type": "user",
                    "children": [{
                    "name": "DragForce 1.1",
                        "imageURL": "",
                        "size": 1082,
                        "type": "chat"
                }, {
                    "name": "DragForce 1.2",
                        "imageURL": "",
                        "size": 1082,
                        "type": "message"
                }]
            },

            {
                "name": "Particle",
                    "imageURL": "",
                    "size": 2822,
                    "type": "user"
            }, {
                "name": "Simulation",
                    "imageURL": "",
                    "size": 9983,
                    "type": "user"
            }, {
                "name": "Node 2",
                    "imageURL": "",
                    "type": "user",
                    "children": [{
                    "name": "DragForce 2.1",
                        "imageURL": "",
                        "size": 1082,
                        "type": "message"
                }, {
                    "name": "DragForce 2.2",
                        "imageURL": "",
                        "size": 1082,
                        "type": "message"
                }]
            },

            {
                "name": "Spring",
                    "imageURL": "",
                    "size": 2213,
                    "type": "user"
            }, {
                "name": "SpringForce",
                    "imageURL": "",
                    "size": 1681,
                    "type": "user"
            }, {
                "name": "Node 3",
                    "imageURL": "",
                    "type": "user",
                    "children": [{
                    "name": "DragForce 2.1",
                        "imageURL": "",
                        "size": 1082,
                        "type": "chat"
                }, {
                    "name": "DragForce 3.2",
                        "imageURL": "",
                        "size": 1082,
                        "type": "chat"
                }]
            }]
        };

Answer 2

尝试如小提琴所示： http://jsfiddle.net/cyril123/n28k7oqo/3/

您可以将数据指定为并传递图像，如下所示

var graph = {
  "nodes": [
    {"x": 469, "y": 410, 'img': "https://cdn1.iconfinder.com/data/icons/industry-2/96/Mine-512.png"},
    {"x": 493, "y": 364, 'img': "https://cdn0.iconfinder.com/data/icons/ikooni-outline-free-basic/128/free-09-128.png"},
    {"x": 442, "y": 365, 'img': "https://cdn0.iconfinder.com/data/icons/ikooni-outline-free-basic/128/free-17-128.png"},
    {"x": 467, "y": 314, 'img': "https://cdn0.iconfinder.com/data/icons/ikooni-outline-free-basic/128/free-22-128.png"},
    {"x": 477, "y": 248, 'img': "https://cdn0.iconfinder.com/data/icons/ikooni-outline-free-basic/128/free-13-128.png"},
    {"x": 425, "y": 207, 'img': "https://cdn1.iconfinder.com/data/icons/industry-2/96/Mine-512.png"},
    {"x": 402, "y": 155, 'img': "https://cdn0.iconfinder.com/data/icons/ikooni-outline-free-basic/128/free-03-128.png"},
    {"x": 369, "y": 196, 'img': "https://cdn1.iconfinder.com/data/icons/industry-2/96/Mine-512.png"},
    {"x": 350, "y": 148, 'img': "https://cdn1.iconfinder.com/data/icons/industry-2/96/Mine-512.png"},
    {"x": 539, "y": 222, 'img': "https://cdn1.iconfinder.com/data/icons/industry-2/96/Mine-512.png"},
    {"x": 594, "y": 235, 'img': "https://cdn0.iconfinder.com/data/icons/ikooni-outline-free-basic/128/free-23-128.png"},
    {"x": 582, "y": 185, 'img': "https://cdn1.iconfinder.com/data/icons/industry-2/96/Mine-512.png"},
    {"x": 633, "y": 200, 'img': "https://cdn1.iconfinder.com/data/icons/industry-2/96/Mine-512.png"}
  ],
  "links": [
    {"source":  0, "target":  1},
    {"source":  1, "target":  2},
    {"source":  2, "target":  0},
    {"source":  1, "target":  3},
    {"source":  3, "target":  2},
    {"source":  3, "target":  4},
    {"source":  4, "target":  5},
    {"source":  5, "target":  6},
    {"source":  5, "target":  7},
    {"source":  6, "target":  7},
    {"source":  6, "target":  8},
    {"source":  7, "target":  8},
    {"source":  9, "target":  4},
    {"source":  9, "target": 11},
    {"source":  9, "target": 10},
    {"source": 10, "target": 11},
    {"source": 11, "target": 12},
    {"source": 12, "target": 10}
  ]
}

说明

json中的x和y是您想放置圆圈的可能位置。想象一下，你没有任何节点的x和y;在这种情况下，不要在JSON中传递x和y。像这样：

 ..."nodes": [
{ 

'img': "https://cdn1.iconfinder.com/data/icons/industry-2/96/Mine-512.png"
}, ....

关于img传递您希望在节点上看到的图像的URL。就像我上面所做的那样。

这会将图像附加到节点组：

  //make groups which will hold the image and the circle
  nodes = node.data(graph.nodes)
    .enter().append("g");

  //make a node circle in the group                   
  var circles = nodes.append("circle")
      .attr("class", "node")
      .attr("r", 12)
      .on("dblclick", dblclick)
      .call(drag);
  //make images in the group
var images = nodes.append("svg:image")
    .attr("xlink:href",function(d) {return d.img})
    .attr("height", "20")
    .attr("width", "20");

节点组是包含圆圈和图像的组。

Answer 3

就像在我的Arda family tree中一样，我按照人的名义在本地加载图像。所以每个人都有自己的照片。

还要确保在删除想要的图像或其他内容时，HTML中的onerror用于显示默认图像。其他Google Chrome浏览器显示丑陋的红十字会。就像一个提示=）

如果您还有其他问题，请询问。

enter image description here

强制定向D3 Graph为每个节点设置特定图像

3 个答案:

说明