d3.js嵌套二維數組

說我有以下的JSON陣列選擇：d3.js嵌套二維數組

var json = [ 
    [1,2,3], 
    [1,2,3], 
    [1,2,3] 
];

我怎樣才能使SVG的網格，而不執行2個selectAll電話rect節點？在這fiddle我能夠使網格，但我不得不渲染每個行中的g節點。有沒有辦法在沒有第一個選擇的情況下編寫它？如果我嘗試：

svg.data(json) 
    .selectAll('rect') 
     .data(function(data) { return data; }) 
     .enter() 
     .append('rect') 
     .attr('x', function(data, x, y) { 
      return (x * size) + (x * spacing); 
     }) 
     .attr('y', function(data, x, y) { 
      return (y * size) + (y * spacing); 
     }) 
     .attr('width', size) 
     .attr('height', size);

它只渲染二維數組的第一行。

來源

2014-03-05 chinabuffet

是否有一個特別的原因，你不想兩次使用'selectAll'？ – Quinn

您的SVG結構應該密切反映您的JSON結構。如果你想改變SVG結構不具有g元素，那麼你需要改變你的JSON結構（可能是一個平面陣列）。 – dcryan22

@奎因不是真的，我是新來的d3，所以我只是想更好地瞭解API :) – chinabuffet

您的意思是說，您寧願在層次結構中沒有g節點，而是想讓所有rects直接兄弟姐妹？

這是可行的，但您必須首先將json平鋪爲具有9個元素的一維數組（這裏未顯示;可以使用Array.reduce()）。然後，你就只能選擇並綁定一次：

var flatJson = [1,2,3,1,2,3,1,2,3] 
svg 
    .selectAll('rect') 
    .data(flatJson)`

和位置，並根據i：

.enter() 
    .append('rect') 
    .attr('x', function(d, i) { 
    return (i % numColumns) * (size + spacing); 
    }) 
    .attr('y', function(d, i) { 
    return Math.floor(i/numColumns) * (size + spacing); 
    }) 
    .attr('width', size) 
    .attr('height', size);

的代價就是需要有列numColumns = 3的數感。

扁平的json可以變成一個對象數組，每個對象可以有一個列和一行。例如：

var flatJson = [ 
    { row:0, col:0, value: 1}, 
    { row:0, col:1, value: 2}, 
    { row:0, col:2, value: 3}, 
    { row:1, col:0, value: 1}, 
    ... 
]

來源

2014-03-05 06:04:30 meetamit

d3.js嵌套二維數組

回答

相關問題