為D3強制定向布局節點設置不同的圖像

Question

我一直試圖制作一種特定類型的力直接圖，類似於此（ 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

Answer 1

這是一個與你鏈接的第一個例子不同的jsfiddle。 我juist改變了從JavaScript代碼而不是json文件獲取數據，因為jsfiddle不支持外部json文件。

---

第一解決方案

現在，讓我們用一組不同的圖像替換恆定圖像

而不是這段代碼：

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

我們會得到這個 ：

---

二解決方案

正如您在問題的代碼中所建議的那樣，可以使用內置的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);

我們會得到這個 ：

---

希望這可以幫助。