JSON屬性中的D3 JavaScript顏色

Question

使用D3 Javascript和JSON，我需要創建與以下內容非常相似的內容：

http://bl.ocks.org/mbostock/4063550

JSON文件（從網站復制）類似於：

{
 "name": "flare",
 "children": [
  {
   "name": "analytics",
   "children": [
    {
     "name": "cluster",
     "children": [
      {"name": "AgglomerativeCluster", "size": 3938},
      {"name": "CommunityStructure", "size": 3812},
      {"name": "HierarchicalCluster", "size": 6714},
      {"name": "MergeEdge", "size": 743}
     ]
    },

現在代替上面代碼中的“大小”，我有了“得分”（即“得分”：3）。

我想要實現的是類似於網站的圖表，但是區別是分數超過某個閾值（例如> 5），我希望小藍圈具有某種顏色（即紅色）。

我知道這需要在index.html文件中進行更新，但是我只是不知道該如何解決。 任何指針將不勝感激！

謝謝！

Answer 1

您所需要做的就是略微修改添加circle s的代碼。 您需要更改代碼段

node.append("circle")
  .attr("r", 4.5);

至

node.append("circle")
  .style("stroke", function(d) { return d.score > 5 ? "red" : "steelblue"; })
  .attr("r", 4.5);

顯然，您可以以相同的方式將這樣的內容應用於例如填充顏色。 如果您擁有更多不同的顏色和閾值，則值得使用刻度而不是條件語句進行調查。

Answer 2

像這樣更改您的JSON：

{
 "name": "flare",
 "children": [
  {
   "name": "analytics",
   "children": [
    {
     "name": "cluster",
     "children": [
      {"name": "AgglomerativeCluster", "score": 3938},
      {"name": "CommunityStructure", "score": 3812},
      {"name": "HierarchicalCluster", "score": 6714},
      {"name": "MergeEdge", "score": 743}
     ]
    },

現在使用一個函數檢查數據中的條件並設置圓的樣式：

node.append("circle")
      .attr("r", 4.5)
      .style("fill",function(d){
          return ((d.score > 5)?"red":"blue");
      });