如何从d3功能在控制台中打印

Question

所以我有这个函数来绘制矩形：

draw(data) {
this.canvas.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr('x', (d) => d.x)
.attr('y', (d) => d.y)
.attr('width', (d) => d.width)
.attr('height', (d) => d.height)
.style('fill', (d) => d.color);
}

我想在控制台d.x和d.y中打印。我写了这个函数：

printData(data) {
this.canvas.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr('x', function(d) { console.log(d.x); });
}

但它并没有在控制台中打印任何内容。有人能帮我说说我在这里做错了什么吗？

Answer 1

我假设您在draw之后调用printData。如果是这种情况，您将看不到任何内容，因为您的"回车"选择为空(因此enter()之后将不调用任何内容(。

在这种情况下，解决方案只是将console.log移动到draw，或者在printData:中使用each()

printData(data) {
this.canvas.selectAll('rect')
.each(function(d) { 
console.log(d.x); 
});
}