Question

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

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

但它没有做任何事情

Answer 1

正如我在评论中所说，您希望将您的rect和text分组到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....

Answer 2

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

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

2 个答案: