Question

这是我的代码，当我检查元素但未显示

时，文本会附加

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/

我做错了什么？

Answer 1

您的代码存在一些问题：

<text>无法进入svg中的<rectangle>。
顶级组填充颜色，隐藏其中的所有内容。

第一点的解决方案是将<rectangle>＆amp; <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;});

Answer 2

您是尝试在画布中的特定位置或画布上的形状中添加文本吗？请参阅小提琴：http://jsfiddle.net/sjp700/6hAg7/

var margin = { top: 40, right: 4, bottom: 40, left: 20 },
  width = 800,
  height = 800;

var data = [100,200,300];

var svgContainer = d3.select("body").append("svg")
        .attr("width", 800)
        .attr("height", 800)
        .style("background", "red")
        .append('g')
        .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');


var rect = svgContainer.selectAll("rect")
                           .data(data)
                           .enter();

rect.append("rect")
    .attr("x", function(d){ return d;})
    .attr("y", function(d){ return d;})
    .attr("width", 100)
    .attr("height", 20)
    .style("fill", "lightblue");

rect.append("text")
       .style("fill", "black")
       .style("font-size", "14px")
       .attr("dy", ".35em")
       .attr("x", function (d) { return d; })
       .attr("y", function (d) { return d+10; })
       .style("style", "label")
       .text(function (d) { return d; });

如何在d3中将文本附加到我的rect？

2 个答案: