javascript - 如何在d3中将文本追加到我的rect中？

这是我的代码，当我检查元素时，文本将追加，但未显示

var data = [0, 1, 2];
var width = 100;
var height = 100;

var canvas = d3.select("body")
               .append("svg")
               .attr("height", 500)
               .attr("width", 500)
               .attr("fill", "red")
               .append("g");


var someData = canvas.selectAll("rect")
                     .data(data)
                     .enter()
                        .append("rect")
                        .attr("height", height)
                        .attr("width", width)
                        .attr("fill", "red")
                        .attr("transform", function(d){ return "translate(" + height * d + ",0)";});

someData.append("text")
        .attr("transform", function(d){ return "translate(" + height * d + ",0)";})
        .attr("font-size", "2em")
        .attr("color", "black")
        .text(function(d){ return d;});

http://jsfiddle.net/2GAxG/

我做错什么了？

最佳答案

您的代码有几个问题：


<text>不能进入svg中的<rectangle>内部。
顶层组填充有颜色，将其中的所有内容隐藏起来。


第一点的解决方案是将<rectangle>和<text>分组为<g>的子组

更新代码：（Demo）

var data = [0, 1, 2];
var width = 100;
var height = 100;

var canvas = d3.select("body")
               .append("svg")
               .attr("height", 500)
               .attr("width", 500)
               //.attr("fill", "red")
               .append("g");


var someData = canvas.selectAll("rect")
                    .data(data)
                    .enter()
                     .append("g")
                      .append("rect")
                      .attr("height", height)
                      .attr("width", width)
                      .attr("fill", "red")
                      .attr("transform",
                       function(d){ return "translate(" + height * d + ",0)";});

canvas.selectAll("g")
        .append("text")
        .attr("transform",
              function(d){ return "translate(" + height * d + ",30)";})
        .attr("font-size", "2em")
        .attr("color", "black")
        .text(function(d){ return d;});

关于javascript - 如何在d3中将文本追加到我的rect中？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23260613/