如何為D3 Sequence Sunburst創建圖例？

Question

我正在修改原始的D3 Sequence Sunburst文件，以更好地滿足我的需求。 原始的colors變量是一個硬編碼的對象。 顯然這不是最好的方法。 我正在使用flare.json示例，該示例更大，更難閱讀，但仍然比測試后將成為用戶的json文件小得多。

我想隨機生成顏色，將它們應用於createvisualization函數中的每個數據，但是我是D3的新手，並且不知道如何1）從json文件中獲取名稱（除了葉子以外的所有內容），以及2 ）與它們的隨機顏色配對。

編輯：

添加隨機顏色並應用它們是微不足道的，

var colors = d3.scale.category10();
...
.style("fill", function(d,i) { return colors(i); })

但是我仍然要注意確保如何在json中獲取所有非葉子的名稱，然后根據隨機顏色和非葉子創建一個數組。

非常感謝您的幫助。

Answer 1

要獲取所有非葉元素的名稱，可以執行以下操作。

var names = [];

function getNames(node) {
  if(node.children) {
    names.push(node.name);
    node.children.forEach(function(c) { getNames(c); });
  }
}

getNames(root);

運行此代碼后， names將包含所需的所有名稱。 要從中生成圖例，可以使用names數組作為數據：

var gs = svg.selectAll("g.name").data(names).enter().append("g").attr("class", "name");
gs.append("rect")
  // set position, size etc
  .attr("fill", d);
gs.append("text")
  // set position etc
  .text(String);

這將為每個名稱附加一個g元素，並在每個g元素內，附加一個rect ，該rect填充有與名稱對應的顏色和一個顯示名稱的text元素。