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

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标签创建正确，根据inspector所说，我无法让flag出现。

我还有一个问题，当我添加这些图像时，我无法移动节点，所以当我创建我看不到的图像时一定有问题。

这是我的 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;})