Question

我正在尝试将图像添加到力布局图中，但我无法做到。

以下是我尝试使用的一组图片：https://www.flag-sprites.com/

以下是我创建img标签并添加属性的代码。

 //Create the nodes

  var node = svg.selectAll('.node')
      .data(nodes)
      .enter().append('g')
      .attr("class", "node")

  node.append("img")
    .attr("src", function(d){ return "blank.gif"; })
    .attr("class", function(d){ return "flag flag-" + d.code;})
    .attr("alt", function(d){ return d.country; })
    .attr("x", function(d){ return -15; })
    .attr("y", function(d){ return -15; })
    .attr("height", 1)
    .attr("width", 1);

我还将flag-sprites生成的css文件上传到我的github帐户并在codepen上设置，但即使正确创建img标签，根据检查员的说法，我也无法显示该标志。

此外我还有一个问题，即当我添加这些图像时，我无法移动节点，因此在创建我看不到的图像时肯定会出现问题。

这是我的codepen项目的链接。 force layout graph with flags

Answer 1

您可以在css中创建另外的类来定义图像的绝对位置

 .absolute{
    position: absolute;
 }

你的js部分看起来像

 //Create nodes as images
    var nodes = d3.select("body").selectAll("img")
        .data(dataset.nodes)
        .enter()
        .append("img")
        .attr("src", "blank.gif")
        .attr("alt", "")
        .attr("class", function(d){return "absolute flag flag-"+d.code;})

在d3.js中更改图像的节点会强制布局图

1 个答案: