Question

需要在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);

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

Answer 1

不幸的是，

<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

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

1 个答案: