Question

我试图通过查找几个类似的问题来解决这个问题，但没有人可以解决它。我想使用JSON-File中的这种数据形式创建一个力导向图：

{
"nodes":[
    {"name":"A", "imagelink": "url-to-img" ,"shape-type":circle},
    {"name":"B", "imagelink": "url-to-img" , "shape-type":rectangle},
    {"name":"A", "imagelink": "url-to-img" ,"shape-type":triangle}
 ]
"links":[
    {"source":1,"target":0,"value":1},
    {"source":2,"target":1,"value":1},
    {"source":2,"target":0,"value":1}
 ]
}

图形的节点应该是由几何形状（由“形状类型”定义）组成的组，包括图像（由“imagelink”定义）。

这是我使用的基本强制布局代码：

var width = 960,
    height = 500;

var force = d3.layout.force()
        .charge(-1000)
        .linkDistance(150)
        .size([width, height]);

var svg = d3.select("body").append("svg");

d3.json("json-file.json");

force
     .nodes(graph.nodes)
     .links(graph.links)
     .start();

var link = svg.selectAll(".link")
            .data(graph.links)
            .enter().append("line")
            .attr("class", "link")
            .style("stroke-width", function (d) {
                return Math.sqrt(d.value);
            });

var node = svg.selectAll(".node")
            .data(graph.nodes)
            .enter().append("g")                
            .attr("class", "node")
            .call(force.drag);

为了将图像包含到形状中，我使用了“剪辑路径方法”（圆圈示例）：

node.append("circle")
            .attr("r", 20)
            .attr("cy", 0)
            .attr("cx", 0)
            .style("fill", "white")
            .style("stroke", "black")
            .style("stroke-width", "2"); 

 var clippath = node.append('clipPath').attr(function (d) {
            return ("clip-" + convert_shape(d.group))
        });

 clippath.append("circle")
            .attr("r", 19)
            .attr("cy", 0)
            .attr("cx", 0);

 node.append("image")
            .attr("x", -37.5)
            .attr("y", -37.5)
            .attr("height", 75)
            .attr("width", 75)
            .attr("xlink:href", function (d) {return (d.imagelink)})
            .attr("clip-path", function (d) {return ("url(#clip-" + d.shapetype) + ")")
            });

正如您所看到的，我的问题是使append（） - 函数数据依赖。那么我怎么能意识到这一点呢？

感谢。

Answer 1

Here是一个工作小提琴，用于绘制具有不同形状和图像的力导向图。

我使用模式解决方案将图像包含在形状中。现在我有以下问题：

如何将图像置于形状中心并根据形状的大小调整尺寸？
如何为形状添加边框？

如何根据D3.js中的数据追加包括图像在内的不同形状？

1 个答案: