如何在 D3 中的矩形中绘制文本

How do I draw text in a rectangle in D3?

本文关键字：绘制 文本 D3      更新时间：2023-09-26

我正在使用这个日历示例：http://bl.ocks.org/KathyZ/c2d4694c953419e0509b，我想将鼠标悬停中显示的值放在每个单元格内，以便它始终可见。我尝试添加这个，我认为它会在每个单元格中打印"!!"，但它没有：

rect.append("text")
attr("dx", "+.65em")
.attr("dy", "+.65em")
.attr("opacity", "1")
.text(function(d) { return '!!!'; });

但它什么也没做

正如我在评论中所说，您希望将矩形和文本分组到一个g元素中。 下面是最简单的示例：

<!DOCTYPE html>
<html>
  <head>
    <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
  </head>
  <body>
    <script>
    var data = [{
      x: 20,
      y: 30,
      text: "Hi"
    }, {
      x: 100,
      y: 200,
      text: "bye"
    }];
    var svg = d3.select("body")
      .append("svg")
      .attr("width", 500)
      .attr("height", 500);
    var g = svg.selectAll('.someClass')
      .data(data)
      .enter()
      .append("g")
      .attr("class","someClass")
      .attr("transform", function(d) {
          return "translate(" + d.x + "," + d.y + ")";
      });
    g.append("rect")
      .attr("width", 40)
      .attr("height", 40)
      .style("fill", "red");
    g.append("text")
      .style("fill", "black")
      .text(function(d) {
        return d.text;
      })
  </script>
  </body>
</html>

对于您正在查看的特定代码.day成为g：

var g = svg.selectAll(".day")
    .data(function(d) { 
      return d3.time.days(new Date(d, 0, 1), new Date(d + 1, 0, 1));
    })
    .enter().append("g")
    .attr("class", "day")
    .attr("transform", function(d){
       var month_padding = 1.2 * cellSize*7 * ((month(d)-1) % (no_months_in_a_row));
       var x = day(d) * cellSize + month_padding; 
       var week_diff = week(d) - week(new Date(year(d), month(d)-1, 1) );
       var row_level = Math.ceil(month(d) / (no_months_in_a_row));
       var y = (week_diff*cellSize) + row_level*cellSize*8 - cellSize/2 - shift_up;
       return "translate(" + x + "," + y + ")";
    });
var rect = g.append("rect"))
    .attr("width", cellSize)
    .attr("height", cellSize)
    .datum(format);
 g.append("text") 
   .text("!!!")
   .style("fill", "black"); 
   // etc, etc, etc....

text属性对rect对象没有任何意义。 您想要添加单独的文本元素： .enter().append("svg:text")然后 .text(function(d) { return '!!!' });您可以相应地设置文本元素的样式。

相关文章：