在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標簽，根據檢查員的說法，我也無法顯示該標志。

另外我還有一個問題，當我添加這些圖像時，我無法移動節點，因此在創建我看不到的圖像時一定有問題。

這是我的codepen項目的鏈接。 強制布局圖與標志

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;})