与上面的d3.select一样，让浏览器搜索元素。这一次，它是一个矩形阵列。因为它是一个数组，我们使用d3.selectAll和d3.selectAll("rect")，因为它是一个矩形数组。如果浏览器找到矩形，它将在选择中返回它们，如果它是空的，它将返回空。使用D3，您必须首先选择您要处理的元素。
我们配合这个矩形用.data(dataArray)阵列存储在dataArray的数据。
要为选择中的每个项目（对应于数据数组）实际添加一个矩形，我们还将添加.enter().append("rect");以附加矩形。在此示例中，将有9个矩形对应于阵列中的9个数字。
如果您现在重新加载页面，您将看不到任何矩形，但如果您检查DOM，您将看到在那里定义的9个矩形。
我们还没有为矩形设置属性以使它们可见，所以现在添加它们。
设置形状的属性我们可以通过使用.attr()，与为SVG定义属性相同的方式向形状添加属性。D3中的每个形状将具有不同的属性，具体取决于它们的定义和绘制方式。
我们的矩形将包含4个属性：
("height", "height_in_pixels") 对应矩形的高度
("width", "width_in_pixels")对应矩形的宽度
("x", "distance_in_pixels")代表与浏览器窗口左侧的距离
("y", "distance_in_pixels")代表与浏览器窗口顶部的距离
因此，如果我们想要长度为250像素，宽40像素，距离浏览器左侧25像素，距离顶部50像素的矩形，我们将编写如下代码：
var svg = d3.select("body").append("svg") .attr("height","100%") .attr("width","100%"); svg.selectAll("rect") .data(dataArray) .enter().append("rect") .attr("height","250") .attr("width","40") .attr("x","25") .attr("y","50");如果我们刷新浏览器，我们会看到所有矩形重叠：
默认情况下，D3中的形状填充为黑色，但我们可以稍后修改，因为我们需要首先解决矩形的定位和大小。
使矩形反映数据目前，我们阵列中的所有矩形沿X轴具有相同的位置，并且不代表高度方面的数据。要修改矩形的位置和大小，我们需要为我们的一些属性引入函数。添加函数将使值成为动态而非手动。让我们从修改x属性开始。目前，该行代码如下所示：
.attr("x","25")我们将用一个函数替换25像素的数字。我们将传递由D3定义的两个变量function()，代表数据点和索引。索引告诉我们数组中数据点的位置。d用于数据点和i索引的惯例，例如function(d,i)，但您可以使用您想要的任何变量。
JavaScript将迭代d和i。让我们为它迭代的每个索引添加间距，以便每个矩形间隔开。为此，我们可以将索引乘以i一定数量的像素。我们现在将使用60，但您可以决定哪种间距适合您。我们新的X轴属性行现在看起来像这样：
.attr("x", function(d, i) {return i * 60;})但是，如果我们现在运行代码，我们会看到矩形在浏览器的左侧齐平，所以让我们在那里添加一些额外的间距，比如距边缘25个像素。现在我们的完整代码应如下所示：
var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30]; var svg = d3.select("body").append("svg") .attr("height","100%") .attr("width","100%"); svg.selectAll("rect") .data(dataArray) .enter().append("rect") .attr("height","250") .attr("width","40") .attr("x", function(d, i) {return (i * 60) + 25}) .attr("y","50");如果我们此时刷新浏览器，我们会看到如下所示的内容：
现在我们有沿X轴间隔开的矩形，代表我们阵列中的每个项目。接下来，让矩形的高度反映数组中的数据。
我们现在将使用该height属性，并将添加一个类似于我们添加到x属性中的函数。让我们通过传递变量开始d和i到function，并返回d。d代表数据点。
.attr("height", function(d, i) {return (d)})
如果你现在运行代码，你会注意到两件事。首先，矩形相当小，其次是它们附着在图表的顶部而不是底部。
为了解决矩形的小尺寸，让我们乘以d返回的：
.attr("height", function(d, i) {return (d * 10)})现在矩形的大小更大，但它们仍然从上到下显示。浏览器通常从左上角到右下角阅读网页，而我们从下到上阅读条形图。要重新定位矩形，我们将修改y属性以减去顶部的空间。