如何使用D3處理重度嵌套的對象

聲明：我對D3非常陌生，所以我確信這是可能的，但還沒有想出要搜索什麼來找出結果。如何使用D3處理重度嵌套的對象

我試圖創建一個使用D3從一個大型數組嵌套的JSON對象/數組中拉出的可視化。例如起見，假設我的目標是這樣的：

var arr = [ 
    { 
     "name":"John", 
     "info":[ 
      { 
       "age":31, 
       "height":6, 
       "weight":155, 
       "eyes":"green" 
      }, 
      { 
       "age":35, 
       "height":6, 
       "weight":165, 
       "eyes":"green" 
      } 
     ] 
    }, 
    { 
     "name":"Eric", 
     "info":[ 
      { 
       "age":29, 
       "height":5, 
       "weight":135, 
       "eyes":"brown" 
      }, 
      { 
       "age":30, 
       "height":5, 
       "weight":155, 
       "eyes":"brown" 
      } 
     ] 
    } 
]

現在，說我想利用這個數據和可視化，但需要使用更多的div的造型比對象的嵌套水平反映。所以，我想代碼，看起來像這樣：

<div> 
    <h1>John</h1> 
    <div> 
     <div> 
      <div> 
       <h2>Age:31</h2> 
       <div> 
        <p>Weight:155</p> 
       </div> 
      </div> 
      <div> 
       <h2>Age:35</h2> 
       <div> 
        <p>Weight:165</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<div> 
    <h1>Eric</h1> 
    <div> 
     <div> 
      <div> 
       <h2>Age:29</h2> 
       <div> 
        <p>Weight:135</p> 
       </div> 
      </div> 
      <div> 
       <h2>Age:30</h2> 
       <div> 
        <p>Weight:155</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

現在，如果我沒有多餘的div，這會是相當簡單的使用

var visualization = d3.select("body").selectAll("div") 
    .data(arr) 
    .enter() 
    .append("div"); 

var person = visualization.selectAll("h1") 
    .data(function(d){return(d.name)} 
    .enter() 
    .append("h1") 
    .text(function(d){return d});

然後我可以做同樣的與div和循環通過d.info創建我所需要的。但是，當我追加嵌套div時，我不能再使用父母的數據循環，並且似乎無法通過.data（）執行的自動循環中找到父div的索引。

真的，我希望能夠做的是基於對ARR []長度創建的div，追加像「名」到該分區的一些信息，然後文體目的一些div追加到根格，然後回到只有根div的數據循環。我想用D3來做到這一點，因爲我知道這是它的目的，但在這一點上，我準備強行使用for循環，我知道我所處的索引，並且可以使用更多嵌套數據。希望這是有道理的，但我完全停留在如何正確使用D3做到這一點。

請問這是否有任何不明確的地方 - 真的希望得到這個想法。謝謝！

來源

2017-01-22 jrlars

我不知道我完全理解你的問題。用這些數據複製你想要的結構並不困難。您可以將許多層，只要你想，繼續訪問父數據：

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="[email protected]" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <script> 
 
    var arr = [{ 
 
     "name": "John", 
 
     "info": [{ 
 
     "age": 31, 
 
     "height": 6, 
 
     "weight": 155, 
 
     "eyes": "green" 
 
     }, { 
 
     "age": 35, 
 
     "height": 6, 
 
     "weight": 165, 
 
     "eyes": "green" 
 
     }] 
 
    }, { 
 
     "name": "Eric", 
 
     "info": [{ 
 
     "age": 29, 
 
     "height": 5, 
 
     "weight": 135, 
 
     "eyes": "brown" 
 
     }, { 
 
     "age": 30, 
 
     "height": 5, 
 
     "weight": 155, 
 
     "eyes": "brown" 
 
     }] 
 
    }]; 
 

 
    var vis = d3.select("body").selectAll("div") 
 
     .data(arr) 
 
     .enter() 
 
     .append("div"); 
 
     
 
    vis.append("h1") 
 
     .html((d) => d.name); 
 
     
 
    var nestedDivs = vis.append("div").append("div"); 
 
    
 
    var innerDiv = nestedDivs.selectAll("div") 
 
     .data((d) => d.info) 
 
     .enter() 
 
     .append("div"); 
 
     
 
    innerDiv.append("h2") 
 
     .html((d) => "Age:" + d.age); 
 
     
 
    innerDiv.append("div") 
 
     .append("span") 
 
     .html((d) => "Weight: " + d.weight); 
 

 
    </script> 
 
    </body> 
 

 
</html>

來源

2017-01-22 21:54:27 Mark

如何使用D3處理重度嵌套的對象

回答

相關問題