Question

我在我的私人网站中使用this图表来显示产品关系，效果很好。

我发现this site节点为图像。试图弄清楚如何重构我当前的图形以支持每个节点的图像。

任何帮助将不胜感激

编辑：“图片”（而非df[df.c1.str.match('|'.join(list1))] c1 c2 1 b 2 2 c 3）的问题在于我无法对其应用css。我正在使用twitter bootstrap并尝试添加名为img的类（仅添加img-circle），但它不适用于图像。尝试了两个：

border-radius: 50%

和

   var nodeImage = node.append("image")
            .attr("xlink:href", function (d) { return d.image })
            .attr("height", function (d) { return d.height + "" })
            .attr("width", function (d) { return d.width + "" })
            .attr("x", function (d) {return -0.5 * d.width })
            .attr("y", function (d) {return -0.5 * d.height })
            .attr("class", "img-circle");

两者都不起作用

EDIT2：完成！

添加以下行：

var nodeImage = node.append("image")
        .attr("xlink:href", function (d) { return d.image })
        .attr("height", function (d) { return d.height + "" })
        .attr("width", function (d) { return d.width + "" })
        .attr("x", function (d) {return -0.5 * d.width })
        .attr("y", function (d) {return -0.5 * d.height })
        .attr("style", "border-radius: 50%;");

Answer 1

在您的文件中，我看到：

graph.nodeRect = graph.node.append('rect')
    .attr('rx', 5)
    .attr('ry', 5)
    .attr('stroke', function(d) {
        return graph.strokeColor(d.categoryKey);
    })
    .attr('fill', function(d) {
        return graph.fillColor(d.categoryKey);
    })
    .attr('width' , 120)
    .attr('height', 30);

您可以附加rect s：

，而不是image

graph.images = graph.nodes.append('image')
    .attr('href', function (d) { return d.linkToThePicture })
    //.attr('foo', 'bar')...

最好将链接存储到数据中的每个图片（或相对文件路径）（无论您存储在哪里d.name）。如果键入.png

，请注意您提供作者的示例使用图像也可能会有所帮助

修改：更好的是，如果您将图片的名称与data中的名称相匹配，那么您的工作就更少了！

graph.images = graph.nodes.append('image')
        .attr('href', function (d) {
            //the replacement takes out spaces
            return '/images/' + d.name.replace(/ /g, '') + '.png' 
        })
        //.attr('foo', 'bar')...

d3.js支持每个节点的图像

1 个答案: