1

サイズの異なるノードを持つ強制有向グラフがあります。2 つのノードを接続する各パスの途中にカスタム アイコンを表示したいと考えています。d3 の例から、ノード内に画像を表示する方法を見つけました。ただし、パスで同じ手法を試すと、画像が表示されません。

var path = svg.append("svg:g").selectAll("path").data(force.links());

var pathEnter = path.enter().append("svg:path");

pathEnter.attr("class", function(d) {
    return "link " + d.target.type;
})

pathEnter.append("svg:g").append("image")
    .attr("xlink:href","http://127.0.0.1:8000/static/styles/images/add.png")
    .attr("x",0).attr("y",0).attr("width",12).attr("height", 12)
    .attr("class", "type-icon");
4

1 に答える 1

1

質問する前にもう少し忍耐が必要だと思います。私が問題を解決した方法は次のとおりです。

var icon = svg.append("svg:g").selectAll("g")
.data(force.links()).enter().append("svg:g");

icon.append("image").attr("xlink:href","imagePath")
  .attr("x", -20)
  .attr("y", -2)
  .attr("width", 12).attr("height", 12)
        .attr("class", "type-icon");

そして、ティック関数で：

        icon.attr("transform", function(d) {
            return "translate(" +((d.target.x+d.source.x)/2) + "," +
                ((d.target.y+d.source.y))/2 + ")";
        });

2つのノード間の中心点を取得します。

于 2013-01-30T10:06:16.613 に答える