再次，我们将使用function(d,i)，并且我们将返回一个高于我们条形图最高值的Y值，比方说400。我们将从400减去返回的高度(d * 10)，以便我们的行现在看起来像这样：
.attr("y", function(d, i) {return 400 - (d * 10)});我们来看看我们的完整JavaScript代码：
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", function(d, i) {return (d * 10)}) .attr("width","40") .attr("x", function(d, i) {return (i * 60) + 25}) .attr("y", function(d, i) {return 400 - (d * 10)});此时，当我们重新加载页面时，我们会看到一个条形图，我们可以从下到上阅读：
现在，我们可以设计图表的样式。
第四步 - 使用D3设置样式我们将使用我们的CSS文件来设计我们的D3形状，但首先，为了使这项工作更容易，我们将在JavaScript文件中为我们的矩形提供一个类名，我们可以在CSS文件中引用它。
添加类就像使用点表示法添加任何其他属性一样。我们称之为班级bar，因为它是一个条形图，但只要所有引用都引用相同的名称，我们就可以调用它。我们的语法如下所示：
.attr("class", "bar")我们可以在任何地方添加此属性。将它保留为第一个属性可以使我们的CSS文件更容易引用。
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("class", "bar") .attr("height", function(d, i) {return (d * 10)}) .attr("width","40") .attr("x", function(d, i) {return (i * 60) + 25}) .attr("y", function(d, i) {return 400 - (d * 10)});现在，让我们切换到我们的style.css文件，目前看起来像这样：
html, body { margin: 0; height: 100% }我们可以通过更改填充颜色来开始修改矩形，引用我们刚刚创建的bar类别：
style.css html, body { margin: 0; height: 100% } .bar { fill: blue }在这里，我们将矩形设为蓝色，我们也可以为它们分配一个十六进制颜色代码，如下所示：
.bar { fill: #0080FF }此时，我们的矩形看起来像这样：
我们可以为矩形提供其他值，例如用stroke以特定颜色勾勒出矩形，以及stroke-width：
html, body { margin: 0; height: 100% } .bar { fill: #0080FF; stroke: black; stroke-width: 5 }这将为我们的矩形提供宽度为5像素的黑色轮廓。
此外，我们可以通过在鼠标悬停时添加条形颜色样式来为我们的图表添加一些交互性：
.bar:hover { fill: red }现在，当我们将鼠标悬停在其中一个矩形上时，该特定矩形将变为红色：
或者，您可以通过添加其他属性来设置JavaScript文件中的形状样式。在矩形块中，我们将像其他.attr()属性一样编写这些。因此，在矩形周围添加黑色笔划将被写为.attr("stroke", "black")。我们还要添加stroke-width个像素，并确保将分号向下移动。
... svg.selectAll("rect") .data(dataArray) .enter().append("rect") .attr("class", "bar") .attr("height", function(d, i) {return (d * 10)}) .attr("width","40") .attr("x", function(d, i) {return (i * 60) + 25}) .attr("y", function(d, i) {return 400 - (d * 10)}) .attr("stroke", "black") .attr("stroke-width", "5");您可以选择如何决定样式和文件样式。在这个例子中，我们将在style.css文件中操作，并将其限制为填充颜色和悬停填充：
html, body { margin: 0; height: 100% } .bar { fill: #0080FF } .bar:hover { fill: #003366 }在网络上处理颜色时，重要的是要牢记您的观众并努力包含尽可能普遍可访问的颜色。
第五步 - 添加标签我们的最后一步是以标签的形式在我们的图表中添加一些可量化的标记。这些标签将对应于我们阵列中的数字。
添加文本类似于添加上面我们所做的矩形形状。我们需要选择文本，然后将其附加到SVG。我们还将它与我们创建的dataArray联系起来。我们将使用"text"，而不是"rect"，但一般格式和我们在上面添加矩形所做的类似。我们将这些行添加到barchart.js文件的底部。
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("class", "bar") .attr("height", function(d, i) {return (d * 10)}) .attr("width","40") .attr("x", function(d, i) {return (i * 60) + 25}) .attr("y", function(d, i) {return 400 - (d * 10)}); svg.selectAll("text") .data(dataArray) .enter().append("text") .text(function(d) {return d;});当我们刷新浏览器时，我们不会在页面上看到任何文字，但我们会在DOM中再次看到它：
