爲什麼D3線與一個JS對象一起工作，但不與另一個JS對象？

的D3代碼在這兩種情況下是

msBars = svgContainer.selectAll('line') 
        .data(jsonFragmentIons) 
        .enter() 
        .append("line") 

    msBarAttributes = msBars 
        .attr("x1", (d) -> return xScale(d.m_mz)) 
        .attr("y1", h - padding) 
        .attr("x2", (d) -> return xScale(d.m_mz)) 
        .attr("y2", (d) -> return h - yScale(d.m_intensity)) 
        .attr("stroke-width", 1.2) 
        .attr("stroke", (d) -> return d.color)

其中所述縮放函數被前面所定義

。再次，所有的d3代碼是一個，json obect是不同的。爲了說明這一點，我創建了這兩個jsfiddles，其中唯一不同的是json對象。

這裏，

http://jsfiddle.net/Nu95q/6/

代碼似乎工作正常，所有的線被描繪。

但是，如果我改變JSON對象，在這裏：

http://jsfiddle.net/Nu95q/7/

D3不畫每一個基準線，JSON對象... 這是我百思不得其解。爲什麼會發生這種情況？我能想到的唯一的事情就是mz_intensity屬性的不同尺度，但是，爲什麼一行代碼沒有問題，但沒有其他代碼呢？

來源

2014-01-28 Vital V

請注意，您的問題**沒有任何**無論如何與JSON做。在你的兩個例子中，你都有一個對象數組。即使您最初以JSON的形式獲取數據，但與問題無關，因爲在解析JSON之後，您有常規的JS對象/數組。另請參閱[不存在「JSON對象」]（http://benalman.com/news/2010/03/theres-no-such-thing-as-a-json/）。 –

還有，我忘了提，文本標籤只是有時候才正確添加...... –

非常有趣@FelixKling，我猜這是一個很常見的誤解。我不知道那 –

問題是，您在添加線條和標籤之前繪製座標軸。通過執行.selectAll("line")和.selectAll("text")，您將選擇軸組件添加的現有DOM元素。然後，您將數據與其匹配，因此您的選擇不包含您所設想的內容。

這個問題也出現在「工作」jsfiddle中，但不那麼突出，因爲有更多的數據項。要解決此問題，請在最後添加座標軸，或向您手動添加的元素（例如bar）添加區分類，以便在選擇時使用。實施後者解決方案的示例here。

來源

2014-01-29 10:39:50

嗨，對問題進行了很好的診斷和解釋！我選擇添加類如下：'.selectAll（'line.peak'）'和'.selectAll（'text.peak_label'）'。它工作得很好，但在生成的html中，行和標籤似乎沒有指定的類（？） –

您還需要添加這些類 - '.attr（「class」，「peak」）'（看到鏈接的jsfiddle）。 –

爲什麼D3線與一個JS對象一起工作，但不與另一個JS對象？

回答

相關問題