在d3js的热图网格中附加文本或圆圈

Posted 2021-03-30

需要在d3js的热图中的“rect”中附加文本或圆圈

Fiddle example: https://jsfiddle.net/ejg2amhj/7/

用这段代码试了很多：

.append("text")
    .text(function() {
    return "1";
});

并试过这个：

  .append("svg")          
  .attr("width", 10)      
  .attr("height", 10)    
  .append("rect")
  .attr("x", 0)
  .attr("y", 0)
  .attr("width", 20)
  .attr("height", 20);

在代码中，我可以看到文本和圆圈，但在屏幕上看不到，无法找到确切的解决方案或任何其他替代在rect中附加文本。

答案

不幸的是，<rect>'s没有像这样的儿童元素。

这是一个快速的解决方案，您可以根据您的设计需求进行调整：

var heatMap = svg.selectAll(".hour")
    .data(accidents)
    .enter().append("rect")
    .attr("x", function(d) { return (d.hour - 1) * gridSize; })
    .attr("y", function(d) { return (d.app - 1) * gridSize; })
    .attr("class", "hour bordered")
    .attr("width", gridSize)
    .attr("height", gridSize)
    .style("stroke", "white")
    .style("stroke-opacity", 0.6)
    .style("fill", function(d) { return colorScale(d.count); });

svg.selectAll(".hourlabel")
    .data(accidents)
    .enter().append("text")
    .attr("class", "hourlabel")
    .attr("x", function(d) { return (d.hour - 1) * gridSize + 12; })
    .attr("y", function(d) { return (d.app - 1) * gridSize + 18; })
    .text(function() {
        return "1";
    });

JSFiddle