Блог

Мой вопрос : Я хочу добавить текст значения поверх каждого квадрата для следующей тепловой карты, чтобы читатели могли четко знать, какое именно значение. Какие изменения я должен внести в следующий код.

Полный код находится здесь https://www.d3-graph-gallery.com/graph/heatmap_style.html

Надеюсь, кто — нибудь сможет помочь мне с этим вопросом. Оцените.

   svg.selectAll()
.data(data, function(d) {return d.group ':' d.variable;})
.enter()
.append("rect")
  .attr("x", function(d) { return x(d.group) })
  .attr("y", function(d) { return y(d.variable) })
  .attr("rx", 4)
  .attr("ry", 4)
  .attr("width", x.bandwidth() )
  .attr("height", y.bandwidth() )
  .style("fill", function(d) { return myColor(d.value)} )
  .style("stroke-width", 4)
  .style("stroke", "none")
  .style("opacity", 0.8)
.on("mouseover", mouseover)
.on("mousemove", mousemove)
.on("mouseleave", mouseleave)
 

})

IIUC Вы можете сделать это, добавив приведенный ниже код в .js свой файл

Полный код находится здесь https://codepen.io/mohan-ys/pen/rNwgpmJ

 var bar = svg
    .selectAll(".label")
    .data(data)
    .enter()
    .append("g")
    .attr("class", "label")
    .attr("transform", "translate(10,15)");
  bar
    .append("text")
    .attr("x", (d) => x(d.group))
    .attr("y", (d) => y(d.variable))
    .attr("dy", ".35em")
    .text((d) => d.value);