Question

说我有以下JSON数组：

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

如何在不执行2 rect次呼叫的情况下呈现SVG selectAll节点的网格？在这个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);

它只渲染2D数组的第一行。

Answer 1

你的意思是你不想在层次结构中拥有g个节点，而是想要制作所有rects直接兄弟节点吗？

这是可行的，但您必须首先将json展平为具有9个元素的1维数组（此处未显示;可以使用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},
  ...
]

d3.js使用2d数组的嵌套选择

1 个答案: