使用d3獲取對象的值

Question

嗨，我剛剛進入d3。現在我有這個數組：

var data = 
    [ 
    {name: "Tim", grades: [2.0, 2.2, 1.7]}, 
    {name: "Mike", grades: [1.7, 1.3, 2.7]}, 
    {name: "Max", grades: [3.0, 2.0, 2.3]}, 
    {name: "Peter", grades: [1.5, 2.0, 1.5]} 
    ]; 

我只需要在一個單獨的數組中的所有名稱。有沒有「d3方式」來做到這一點？我嘗試過使用d3.values，但無法啓動它。

任何幫助是apreciated

Answer 1

簡單的JavaScript是足夠的; d3並沒有真正增加任何輕鬆做這個特定的任務。你會在D3代碼經常看到array.map()因爲它沒有你找的工作：

var data = [ 
 
    {name: "Tim", grades: [2.0, 2.2, 1.7]}, 
 
    {name: "Mike", grades: [1.7, 1.3, 2.7]}, 
 
    {name: "Max", grades: [3.0, 2.0, 2.3]}, 
 
    {name: "Peter", grades: [1.5, 2.0, 1.5]} 
 
]; 
 
    
 
var names = []; 
 

 
names = data.map(function(d) { return d.name; }) 
 
    
 
console.log(names);

這裏是array.map()方法的描述：

地圖（ ）方法創建一個新的數組，其結果是在調用數組中的每個元素上調用 提供的函數。

如果你真的想用D3達到同樣的效果，你可以使用d3.map（）（見this answer和API documentation）。您可以使用d3.map（）的.keys()方法獲取的密鑰列表：

var data = [ 
 
    {name: "Tim", grades: [2.0, 2.2, 1.7]}, 
 
    {name: "Mike", grades: [1.7, 1.3, 2.7]}, 
 
    {name: "Max", grades: [3.0, 2.0, 2.3]}, 
 
    {name: "Peter", grades: [1.5, 2.0, 1.5]} 
 
]; 
 

 
console.log(d3.map(data, function(d) { return d.name}).keys());

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>