D3可摺疊的樹，結的變色和避免線路/文字重疊

正如你可以看到，該樹是一個有點複雜，一些離開名字可能會很長。我的主要問題是：

我們是否可以改變特定結的顏色（一些藍色，一些紅色），並且我有什麼辦法可以讓它使得文字留下不與前一個鏈接重疊水平？特別是當鏈接是直線時，會發生這種情況。

我的JS技能缺乏說，至少這些是我的寶貝步入這個世界，任何幫助將不勝感激。

謝謝！

第一個問題的答案很簡單。在你的例子中節點的顏色設置在第90行 -

.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

要改變顏色，你需要做的就是修改這條線。在返回顏色的函數中，您可以訪問綁定到節點的數據，因此您可以使用任何數據屬性來決定顏色。請注意，此處僅設置填充顏色，而不是輪廓筆觸顏色，但您可以輕鬆地添加.style("stroke", ...)。

第二個問題的答案要複雜得多。你所要求的功能並不是D3內置的，所以你必須自己去做。請注意，這將是一件相當複雜的事情，因爲您必須動態地找出鏈接和文本元素的位置和邊界框。以一般方式做這件事將是一個重大項目。

我建議您嘗試使用標籤展示位置以儘可能避免重疊。這會容易得多。

2013-08-26 08:38:22

非常感謝您的回答Lars，那麼您可以對特定的顏色做出特定的確定嗎？假設你想要節點「Private Sector」處於藍色，「Private Sector」處於黃色。任何想法，我可以從標籤展示位置開始？我不認爲我只能調整特定節點的標籤位置？ Muchos gracias再 –

你可以爲特定的節點做所有這些，只需檢查數據（例如'if（d.name ==「Private Sector」）{return「blue」;}'等等）。從標籤佈局開始的一個好地方是使用「text-anchor」屬性，它將調整相對於節點的佈局。 –

啊，這讓我很難過。我編輯了93到140之間的HTML，並嘗試爲其中一些節點提供不同的筆劃，但事實證明只有最後一行被註冊，因爲所有其他節點都被淡藍色了。我覺得我缺少一些非常基本的東西在這裏:( –

回答