d3条形图将文本附加到条形图答案

【问题标题】：d3 Bar Chart append text to bard3条形图将文本附加到条形图
【发布时间】：2015-06-11 18:20:27
【问题描述】：

我已按照教程从左对齐的 Scott Murray 制作条形图。我的数据集有问题，将数据集作为文本添加到条形图。

下图： 1 个条形图：来自教程，第 2 个条形图：我想如何显示文本。

到目前为止，这是我的代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Tutorial d3 bar chart!</title>
        <script type="text/javascript" src="d3/d3.v3.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            //Width and height
            var w = 500;
            var h = 100;
            var i = 0;
            var barPadding = 1;

            var dataset =  [
                        {key:"Department1", value:6234490},
                        {key:"Department 2", value:9700},
                        {key:"Department 3", value:2954},
            ];

            //Width and height
            var w = 500;
            var h = 100;
            var barPadding = 1;

            //Create SVG element
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);

            svg.selectAll("rect")
               .data(dataset)
               .enter()
               .append("rect")
               .attr("x", function(d, i) {
                    return i * (w / dataset.length);
               })
               .attr("y", function(d) {
                    return h - (d * 4);
               })
               .attr("width", w / dataset.length - barPadding)
               .attr("height", function(d) {
                    return d * 4;
               })
               .attr("fill", function(d) {
                    return "rgb(0, 0, " + (d * 10) + ")";
               });

            svg.selectAll("text")
               .data(dataset)
               .enter()
               .append("text")
               .text(function(d) {
                    for(int i = 0; i < dataset.length; i++){
                        return d[i].key;
                    }

               })
               .attr("text-anchor", "middle")
               .attr("x", function(d, i) {
                    return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
               })
               .attr("y", function(d) {
                    return h - (d * 4) + 14;
               })
               .attr("font-family", "sans-serif")
               .attr("font-size", "11px")
               .attr("fill", "white");
        </script>
    </body>
</html>

我尝试在这部分添加文字：

svg.selectAll("text")
               .data(dataset)
               .enter()
               .append("text")
               .text(function(d) {
                    for(int i = 0; i < dataset.length; i++){
                        return d[i].key;
                    }

               })

但这只是给了我这个错误：

希望大家能帮帮我。

【问题讨论】：

标签： javascript text d3.js charts

【解决方案1】：

尝试将 int 更改为 var，int 在 javascript 中不存在。

【讨论】：

【解决方案2】：

d3js 中的每个函数都提供对数据和索引的访问。就用这个

svg.selectAll("text")
           .data(dataset)
           .enter()
           .append("text")
           .text(function(d){return d.key;}
           })

编辑

svg.selectAll("g")
           .data(dataset)
           .enter()
           .append("g")
           .append("rect")
           .attr("x", function(d, i) {
                return i * (w / dataset.length);
           })
           .attr("y", function(d) {
                return h - (d * 4);
           })
           .attr("width", w / dataset.length - barPadding)
           .attr("height", function(d) {
                return d * 4;
           })
           .attr("fill", function(d) {
                return "rgb(0, 0, " + (d * 10) + ")";
           })
           .append("text")
           .text(function(d) {                 
                    return d.key;
           })
           .attr("text-anchor", "middle")
           .attr("x", function(d, i) {
                return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
           })
           .attr("y", function(d) {
                return h - (d * 4) + 14;
           })
           .attr("font-family", "sans-serif")
           .attr("font-size", "11px")
           .attr("fill", "white");

【讨论】：

当我在 firebug 中查看 "everything" i59.tinypic.com/23jl9op.png 时收到这些错误，表示意外值。
条形显示是否没有文字？顺便说一句，文本和矩形不需要在中。检查编辑