識別在此d3堆疊條形圖示例中使用的函數示例

我正在通過d3教程工作，並在學習d3和javascript時一起學習。我的目標是理解，並在此URL改變堆積條形圖例如：識別在此d3堆疊條形圖示例中使用的函數示例

http://bl.ocks.org/3886208

在此圖表的代碼中，有這樣一段話：

data.forEach(function(d) { 
    var y0 = 0; 
    d.ages = color.domain().map(function(name) **{ return {name: name, y0: y0, y1: y0 += +d[name]}; });** 
    d.total = d.ages[d.ages.length - 1].y1; 
    });

你能告訴我是什麼類型的過程或函數正在粗體行「{return {name：name，y0：y0，y1：y0 + = + d [name]}」？我知道它定義了（名稱）的處理方式，但代碼非常簡潔，我無法找出搜索詞來發現它正在做什麼。我希望得到一個回覆，例如「這是一個用js或d3做x的人的例子，你需要到這裏閱讀更多關於它的信息。」

來源

2012-11-22 ouonomos

被大括號包圍的東西是對象字面值。 匿名函數function(name)正在爲由color.domain()返回的數組中的每個值返回對象文字。 map是一個javascript數組內建。

希望這足以讓您搜索更多信息。對象文字在JavaScript中使用很多;你會很好地閱讀一個像樣的引物（比如Crockford的Javascript：The Good Parts），它將涵蓋這個，匿名函數，閉包等（這是一個在d3等框架中使用很多的習慣用法）。

來源

2012-11-22 14:23:15 seb

謝謝！我在週末買了一個JavaScript指南，所以這些對我來說應該是很好的起點。真的很感激它。 – ouonomos

祝你好運！順便說一句，如果你認爲它回答了這個問題，你可以「接受」答案而不是放棄它。這將其標記爲（可能）在Stack Overflow系統中關閉。 – seb

我相信你指的是D3.js例如用於Stacked Bar Chart

的代碼被返回其被初始化爲包含3個不同的對象（name，y0和y1）的對象，該值分配給後y1它也通過d[name]增加變量y0的值。我正在重寫相同的代碼，但語法不同，所以它更易於理解。

var y0 = 0; 
d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });

可以翻譯成：

var y0 = 0; // Initialize the temp var 

d.ages = color.domain() 
    .map(function(name) { 
    var myObj = { // Create and initialize the variable that will be returned 
     name: name, 
     y0: y0, 
     y1: y0 + Number(d[name]) 
    }; 

    y0 += Number(d[name]); // Increase y0 

    return myObj; // return the object and continue with the remaining values if there's a list 
});

因此，舉例來說，如果你輸入數據收到包含一個符合值[3, 5, 9]列表會創建一個包含了其他3個對象的ages對象該行類似於：

ages: [ 
    Object { name="youVariableName", y0=0, y1=3} 
    Object { name="youVariableName", y0=3, y1=8} 
    Object { name="youVariableName", y0=8, y1=17} 
    ]

對於其餘行和其對應的值等。

來源

2014-09-04 22:27:08

識別在此d3堆疊條形圖示例中使用的函數示例

回答

相關問題