D3 - 從同一個數據集嵌套多個圖表

我有以下代碼;D3 - 從同一個數據集嵌套多個圖表

var matrix = [ 
    [ 1, 2, 3, 4], 
    [ 5, 6, 7, 8] 
]; 

var tr = d3.selectAll("td.sparkline").append("table").selectAll("tr") 
.data(matrix) 
.enter() 
.append("tr"); 

var td = tr.selectAll("td") 
.data(function(d) { return d; }) 
.enter() 
.append("td") 
.text(function(d) { return d; });

什麼是正確的方法來做到以下幾點;

<td class="sparkline">matrix[0]</td> 
<td class="sparkline">matrix[1]</td>

我可以對容器使用相同的類嗎？我不斷收到這兩個行中的數組。

我讀了關於這裏的嵌套 http://bost.ocks.org/mike/nest/ 但我仍然無法弄清楚。

來源

2013-07-07 user2557274

目前還不清楚你想在這裏完成什麼。你有沒有一個td元素的表，"sparkline"類已經在DOM中，並且你正在試圖添加一個新的表？或者你想在別的地方換一張新桌子嗎？你想要矩陣中的每個數字有一個單元，還是矩陣每行有一個單元？

這撥弄說明上述的選擇：http://jsfiddle.net/nrabinowitz/ma7Dn/

在第一個版本，代碼是您提供它，而且也與td.sparkline元素的DOM現有表追加新的內容。結果是td中的一個新表，其中行和單元對應於您的矩陣結構。

在第二個版本中，我們要追加一個新表到不同的元素，與基質中每行一個行，每行一個單元：

var tr2 = d3.select("#v2").append("table").selectAll("tr") 
    .data(matrix) 
    .enter().append("tr").append("td") 
    .attr("class", "sparkline") 
    .text(function(d) { return d.join(", "); });

第一個版本按預期工作與你的自己的代碼，所以我假設這不是你想要的。我的猜測是你的初始選擇器td.sparkline是造成混淆的原因;如果這沒有引用已經在DOM中的東西，這是一個錯誤。

來源

2013-07-07 04:13:51 nrabinowitz

嗨，謝謝你的回答。讓我澄清一下，因爲我從這裏得到了表格示例> http://bost.ocks.org/mike/nest/我有一張我用php生成的表格，現在我想在每行中放置一個sparkline（或者更好）到d3。由於我有多個sparkline類，我可以使用select（「td.sparkline」），它給了我第一行所有的迷你圖或者td.selectAll，它給了我所有行中的所有迷你圖。有沒有辦法在正確的行中給我正確的迷你線？ – user2557274

我在哪裏說td.select我的意思是selectAll（「td.sparkline」） – user2557274

想通了......

d3.selectAll('td.sparkline') 
.data(matrix) 
.text(function(d, i) 
    { return 'Result #' + (i + 1) + ': ' + d; // i is 0-based. 
});

讓我給每個索引添加到正確的行的能力。這個鏈接非常有幫助; http://code.hazzens.com/d3tut/lesson_1.html

來源

2013-07-07 19:35:00 user2557274

D3 - 從同一個數據集嵌套多個圖表

回答

相關問題