Диаграмма тепловых карт D3.Js не отображает всплывающие тексты / подсказки - PullRequest
Новая
       26

Диаграмма тепловых карт D3.Js не отображает всплывающие тексты / подсказки

0 голосов
/ 05 апреля 2019

Я взял диаграмму тепловых карт из http://bl.ocks.org/tjdecke/5558084 и изменил ее. Я ожидал получить всплывающие подсказки, используя 

cards.select("svg:title").text(function(d) {
    return "Tariff " + d.value;
});

Полный проект здесь: https://jsfiddle.net/8wtoqg6r/1/.

enter image description here

Как получить событие наведения, чтобы показать номер тарифа (который d.value) во всплывающей подсказке?

1 Ответ

0 голосов
/ 05 апреля 2019

Я сейчас использую https://github.com/Caged/d3-tip в соответствии с примером http://bl.ocks.org/Caged/6476579. Соответствующий код выглядит так 

let tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([0, 0])
  .html(function(d) {
    return "Tarif " + d.value;
  });

  svg.call(tip);

let heatmapChart = function(data) {
  let cards = svg.selectAll(".hour")
    .data(data, function(d) {
      return d.day + ':' + d.hour;
    });

  cards.append("title");

  cards.enter().append("rect")
    .attr("x", function(d) {
      return (d.hour - 1) * gridSize;
    })
    .attr("y", function(d) {
      return (d.day - 1) * gridSize;
    })
    .attr("rx", 4)
    .attr("ry", 4)
    .attr("class", "hour bordered")
    .attr("width", gridSize)
    .attr("height", gridSize)
    .on('mouseover', tip.show)
    .on('mouseout', tip.hide)
    .style("fill", function(d) {
      return colors[d.value - 1];
    });

  cards.exit().remove();
};

heatmapChart(data);

Полное решение можно найти в скрипке: https://jsfiddle.net/8wtoqg6r/3/

...