CODEWITHSUNDEEP
javascripthtmld3.jssvg
Sunniya Maini
Sunniya Maini

Reputation: 75

Append text or circle in heatmap grid of d3js

Need to append text or circle in "rect" in heatmap of d3js

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

Tried a lot with this code: 

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

And tried this as well:

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

In code I can see text and circle but not visible on screen, not able to find out the exact solution or any other alternative to append text in rect.

Upvotes: 0

Views: 666

Answers (1)

Josh Rumbut
Josh Rumbut

Reputation: 2710

<rect>'s don't take child elements like that unfortunately.

Here's a quick solution that you could adjust to your design needs:

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

Upvotes: 2

Related Questions