在d3.js力导向图中更改图像节点

Question

在d3.js力导向图中更改图像节点

3

我正在尝试将图片添加到我的力导向图中，但是无法实现。

这是我要使用的一组图片：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。

- coderHook

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kurumkan · Accepted Answer

你可以在你的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;})