D3.js 如何在d3中增量绘制网格？
下面是一个HTML文件，它将绘制一个10x10的正方形网格，浅灰色和深灰色交替。它用0或1填充称为_网格的二维数组；然后用x、y和颜色填充称为节点的一维数组；然后用d3绘制节点。他们都出现了。它们看起来像这样： 如何取而代之的是绘制节点，即按照节点数组给出的顺序一次显示一个节点，这样我就可以绘制不同的图案，比如垂直擦拭、水平擦拭等等 我试图摆弄转换函数，但没有成功。它只是绘制整个网格，然后将其滑动到位。这些方块不会一个接一个地出现 守则：D3.js 如何在d3中增量绘制网格？,d3.js,D3.js,下面是一个HTML文件，它将绘制一个10x10的正方形网格，浅灰色和深灰色交替。它用0或1填充称为_网格的二维数组；然后用x、y和颜色填充称为节点的一维数组；然后用d3绘制节点。他们都出现了。它们看起来像这样： 如何取而代之的是绘制节点，即按照节点数组给出的顺序一次显示一个节点，这样我就可以绘制不同的图案，比如垂直擦拭、水平擦拭等等 我试图摆弄转换函数，但没有成功。它只是绘制整个网格，然后将其滑动到位。这些方块不会一个接一个地出现 守则： <html> <head>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script>
function draw_function() {
var vis = d3.select("#graph")
.append("svg")
.attr("width", 200).attr("height", 200);
// fill the_grid
var shape=[10,10];
var the_grid=[];
for (var idx = 0; idx < shape[0]; idx++) {
var row = [];
for (var jdx = 0; jdx < shape[1]; jdx++) {
var val = (idx+jdx)/2;
row.push(Math.floor(val)==val ? 1 : 0);
}
the_grid.push(row);
}
// fill nodes
var rectwidth = 10;
var nodes = [];
for (var idx = 0; idx < the_grid.length; idx++) {
for (var jdx = 0; jdx < the_grid[0].length; jdx++) {
var node = {x: idx * (rectwidth+1),
y: jdx * (rectwidth+1),
color: the_grid[idx][jdx] == 1 ? 'black' : 'lightgrey'};
nodes.push(node);
}
}
// draw nodes
vis.selectAll("rect.nodes")
.data(nodes)
.enter()
.append("svg:rect")
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; })
.attr("height", rectwidth)
.attr("width", rectwidth)
.attr("fill", function(d) { return d.color; })
}
// function has to execute after dom is loaded
window.onload = draw_function
</script>
<style>rect { color: black; }</style>
</head>
<body><div id="graph"/></body>
</html>
要错开从同一数据数组同时输入的多个元素的转换，可以使用transition.delay，可以指定一个常数同时启动所有转换，也可以指定一个函数以每个元素的数据或其索引为基础计算延迟：
selection.transition()
.delay(function(d,i) { return i * 100; })
.attr(...