d3.jsで画像のノードを変更するレイアウトグラフ

Question

強制レイアウトグラフに画像を追加しようとしていますが、できません。私はimgタグを作成し、属性を追加するにはここではコードですhttps://www.flag-sprites.com/

：ここ

は、私が使用しようとしています画像のセットです。

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

私もフラグスプライトは私のgithubのアカウントに発生し、codepen上に設定したCSSファイルをアップロードしますが、imgタグが正しく作成された場合でも、検査員が言うによると、私はフラグをすることはできません現れる。

また、これらの画像を追加するとノードを移動できないため、表示できない画像を作成するときに間違っている必要があります。

私のcodepenプロジェクトへのリンクです。 force layout graph with flags

Answer 1

あなたはそれが多分ことができます、

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