如果将鼠标悬停在DOM中的文本行上，您将看到文本全部位于页面顶部，其中X和Y等于0.我们将使用与我们相同的函数公式修改位置通过添加属性用于矩形。
... svg.selectAll("text") .data(dataArray) .enter().append("text") .text(function(d) {return d}) .attr("x", function(d, i) {return (i * 60) + 25}) .attr("y", function(d, i) {return 400 - (d * 10)});现在加载网页时，您会看到浮动在条形图上方的数字。
值得注意的是，因为这是SVG而不是图像，所以您可以选择文本，就像在页面上看到的任何其他文本一样。
从这里开始，您可以通过修改函数公式来重新定位数字。您可能希望将它们悬浮在条形图上方，例如：
... svg.selectAll("text") .data(dataArray) .enter().append("text") .text(function(d) {return d}) .attr("x", function(d, i) {return (i * 60) + 36}) .attr("y", function(d, i) {return 390 - (d * 10)});或者，您可以通过根据Y轴修改它们的位置，使数字浮动在矩形上。我们还想让它更具可读性，所以让我们添加一个我们可以从style.css文件中访问的类。
... .text { fill: white; font-family: sans-serif }
您可以通过定位和样式尽可能多地修改文本。例如，您可能还想更改style.css文件中的font-size属性。
完成的代码和代码改进此时，您应该拥有一个在JavaScript的D3库中呈现的功能完备的条形图。让我们看看我们所有的代码文件。
barchart.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Bar Chart</title> <!-- Reference style.css --> <link rel = "stylesheet" type="text/css" href="http://www.likecs.com/style.css"> <!-- Reference minified version of D3 --> <script type="text/javascript" src="http://www.likecs.com/d3.min.js"></script> </head> <body> <script type="text/javascript" src="http://www.likecs.com/barchart.js"></script> </body> </html> style.css html, body { margin: 0; height: 100% } /*Rectangle bar class styling*/ .bar { fill: #0080FF } .bar:hover { fill: #003366 } /*Text class styling*/ .text { fill: white; font-family: sans-serif } barchart.js // Create data array of values to visualize var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30]; // Create variable for the SVG var svg = d3.select("body").append("svg") .attr("height","100%") .attr("width","100%"); // Select, append to SVG, and add attributes to rectangles for bar chart 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)}); // Select, append to SVG, and add attributes to text svg.selectAll("text") .data(dataArray) .enter().append("text") .text(function(d) {return d}) .attr("class", "text") .attr("x", function(d, i) {return (i * 60) + 36}) .attr("y", function(d, i) {return 415 - (d * 10)});此代码完全正常，但您可以做很多事情来改进代码。例如，您可以利用SVG组元素将SVG元素组合在一起，从而允许您在更少的代码行中修改文本和矩形。
您还可以通过不同方式访问数据。我们使用数组来保存我们的数据，但您可能希望可视化您已有权访问的数据，并且它可能比数组中的数据要多得多。D3将允许您使用几种不同的数据文件类型：
HTML
JSON
纯文本
CSV（逗号分隔值）
TSV（制表符分隔值）
XML
例如，您可以在网站的目录中拥有一个JSON文件，并将其连接到JavaScript文件
d3.json("myData.json", function(json) { // code for D3 charts in here });您还可以将D3库与您可能已经从vanilla JavaScript中了解的其他交互式功能相结合。
结论本教程通过在JavaScriptD3库中创建条形图。您可以通过访问GitHub上的D3 API来了解有关d3.js的更多信息。更多前端教程请前往腾讯云+社区学习更多知识。
参考文献：《Getting Started with Data Visualization Using JavaScript and the D3 Library 》
问答腾讯云服务器？
相关阅读教你从0到1搭建小程序音视频
教你快速搭建一场发布会直播方案
移形换影 - 短视频色彩特效背后的故事
此文已由作者授权腾讯云+社区发布，原文链接：https://cloud.tencent.com/developer/article/1181781?fromSource=waitui
欢迎大家前往腾讯云+社区或关注云加社区微信公众号（QcloudCommunity），第一时间获取更多海量技术实践干货哦~
海量技术实践经验，尽在云加社区！ https://cloud.tencent.com/developer?fromSource=waitui