4

これに似た特定のタイプの力の直接グラフを作成しようとしています( http://bl.ocks.org/mbostock/950642 ):

ここに画像の説明を入力

ただし、すべて同じ画像を使用する代わりに、グラフ上の異なる情報を表す異なる画像を使用したいと考えています。

これに対する私の最初のステップは、すべての円の画像をランダムにリンクされた形状に変更できるようにすることです。コードに何を実装しようとしても、円は別の形に置き換えられるのではなく、消えてしまいます。この問題に関するヘルプは素晴らしいでしょう。これがコードです。申し訳ありませんが、私はこのサイトも初めてです。

 // nodes
    var nodeSelecton = svg.selectAll(".node").data(nodes).enter().append("g").attr({
        class : "node"
    }).call(force.drag);

    nodeSelecton.append("circle").attr({
       r : nodeRadius 

    }).style("fill", function(d) {
        return color(d.group);
    });

    nodeSelecton.append("svg:text").attr("text-anchor", "middle").attr('dy',   ".35em").text(function(d) {
        return d.name;
    });

    // Add a new random shape.
      // nodes.push({
        //   type: d3.svg.symbolTypes[~~(Math.random() * d3.svg.symbolTypes.length)],
          // size: Math.random() * 300 + 100
4

1 に答える 1

7

これは、リンクした最初の例と同等の jsfiddle です。jsfiddle は外部の json ファイルを十分にサポートしていないため、json ファイルではなく JavaScript コードからデータを取得するように変更しました。

最初の解決策

それでは、一定の画像を一連の異なる画像に置き換えましょう

このコードの代わりに:

.attr("xlink:href", "https://github.com/favicon.ico")

このコードを挿入します。

.attr("xlink:href", function(d) {
    var rnd = Math.floor(Math.random() * 64 + 1);
    var imagePath =
           "http://www.bigbiz.com/bigbiz/icons/ultimate/Comic/Comic"
           + rnd.toString() + ".gif";
    console.log(imagePath);
    return imagePath;
})

そして、これを取得します：

ここに画像の説明を入力

2 番目のソリューション

質問のコードで提案したように、組み込みの SVG シンボルを使用できます。

画像を挿入するためのこのセグメント全体の代わりに:

node.append("image")
    .attr("xlink:href", "https://github.com/favicon.ico")
    .attr("x", -8)
    .attr("y", -8)
    .attr("width", 16)
    .attr("height", 16);

このコードを使用できます。

node.append("path")
    .attr("d", d3.svg.symbol()
    .size(function(d) {
        return 100;
    })
    .type(function(d) {
        return d3.svg.symbolTypes[~~(Math.random() * d3.svg.symbolTypes.length)];
    }))
    .style("fill", "steelblue")
    .style("stroke", "white")
    .style("stroke-width", "1.5px")
    .call(force.drag);

そして、これを取得します：

ここに画像の説明を入力

お役に立てれば。

于 2014-05-23T10:11:18.873 に答える