D3：以圖像和圓圈爲節點的樹形圖

我試圖重現"tree diagram with images as nodes"。D3：以圖像和圓圈爲節點的樹形圖

但是，我不想讓所有的節點都帶有圖像，我想要一些節點帶有圖像，其他節點帶有正常的圓圈。

任何想法？

有什麼事情，我需要在這部分代碼修改：

nodeEnter.append("image") 
    .attr("xlink:href", function(d) { return d.icon; }) 
    .attr("x", "-12px") 
    .attr("y", "-12px") 
    .attr("width", "24px") 
    .attr("height", "24px");

來源

2014-05-05 lizzie

的一種方式。也就是說，你過濾你的選擇只有你想要的元素循環併爲這些元素添加圓圈。類似於具有圖像的節點。 –

另一種方法是製作節點''元素，然後根據數據添加圖像或圓形到組。 – AmeliaBR

肯定有幾個顯著不同的方式來實現你想要的。但是，我將向您展示一種既簡單又符合d3圖書館精神的方式。

爲了方便，我準備你提到的例子中的jsfiddle版本：

link to jsfiddle

enter image description here

（因爲我無法弄清楚從例如路徑圖標，我使用了一些我在互聯網上找到的，我用它們的完整的互聯網地址）

現在，讓我們在這個代碼更改兩個這樣的網絡圖標路徑的空字符串（指示圈應顯示，而不是圖標），如：

{ 
    "name": "Son of A", 
    "parent": "Level 2: A", 
    "value": 5, 
    "type": "steelblue", 
    "icon": "", 
    "level": "orange" 
    },

我們必須找到方法來選擇只有包含圖標空字符串的節點，併爲它們添加圓圈。這是用以下代碼完成的：

nodeEnter.filter(function(d) { 
      return (d.icon == ""); 
     }) 
     .append("circle") 
     .attr("cx", "0px") 
     .attr("cy", "0px") 
     .attr("r", "12px");

就是這樣！

link to jsfiddle

這樣做會怎樣對待你想圈和圖像分開節點

enter image description here

來源

2014-05-05 21:13:09 VividD

謝謝@VividD！它非常完美！ – lizzie

嗨VividD，我們希望使用d3js分層樹來表示拓撲。我們正在尋找的特點是：1。 \t點對點連接 2. \t兒童與2位家長 3.表示爲一條直線，而不是默認的曲線在兩個物體之間\t鏈接。 – Abhij

D3：以圖像和圓圈爲節點的樹形圖

回答

相關問題