Cal-HeatMap

Question

我正在尝试使用 Cal-HeatMap

在同一个单元格中包含日期和值

这是我正在尝试做的 fiddle 示例....

[https://jsfiddle.net/paulrollings/6L36ajhn/12/][2]

非常感谢任何建议。谢谢保罗

Answer 1

您可以在 CalHeatMap 渲染后破解它：

// wrap in timeout to let map render
setTimeout(function(){
  var t = d3.selectAll('.subdomain-text') // find all the text blocks
    .text(null); // blank them out
  t.append('tspan')
    .text(function(d){
      return new Date(d.t).getDate(); //append tspan with date
    })
    .attr('x', function(d){
      return d3.select(this.parentNode).attr('x'); // steal parent x value so it stays in place
    });
  t.append('tspan')
    .text(function(d){
      return "€" + d.v; //append tspan with value
    })
    .attr('dy','1.2em')
    .attr('x', function(d){
      return d3.select(this.parentNode).attr('x'); // steal parent x value so it stays in place
    });
}, 100);

已更新 fiddle here。

Cal-HeatMap - 如何格式化 subDomainText 单元格中的日期和值

Cal-HeatMap - How to format date and value in subDomainText cell

javascript

d3.js