D3.Js 热图不显示悬停文本/工具提示

Question

我从 http://bl.ocks.org/tjdecke/5558084 中获取了热图图表并对其进行了修改。我期待使用

获得工具提示

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

完整的项目在这里：https://jsfiddle.net/8wtoqg6r/1/。

如何获得悬停事件以在工具提示中显示关税编号（d.value）？

Answer 1

我现在正在使用 https://github.com/Caged/d3-tip according to the example 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);

可以在 fiddle 中找到完整的解决方案：https://jsfiddle.net/8wtoqg6r/3/

D3.Js 热图不显示悬停文本/工具提示

D3.Js heatmap chart not showing hover texts / tooltips

javascript

tooltip

d3.js