在 dc.js 图表中禁用标题标签答案

【问题标题】：Disable title tag in dc.js charts在 dc.js 图表中禁用标题标签
【发布时间】：2017-02-13 22:50:04
【问题描述】：

在使用dc.js 构建的this chart 中，我们拥有d3.tip 以及默认的title 标签。

我们需要在工具提示中包含多个数据（不仅是 key 和 value）。出于这个原因，我们正在减少数据：

 var denialGroup = denialReasonDim.group().reduce(
    function(p, v) {
      p.reason = v.reason;
      p.payer = v.payer;
      p.denialAmount += v.denialAmount;
      p.claimCount += v.claimCount;
      ++p.count;
      return p;
    },
    function(p, v) {
      p.reason = v.reason;
      p.payer = v.payer;
      p.denialAmount -= v.denialAmount;
      p.claimCount -= v.claimCount;
      --p.count;
      return p;
    },
    function() {
      return {
        reason: '',
        payer: '',
        denialAmount: 0,
        claimCount: 0,
        count: 0
      }
    }
  );

并将其交给渲染title标签：

.title(function(d) {
  var data = denialGroup.all().filter(function(t) {
    return t.key == d.data.key || t.value.reason == d.data.key;
  })
  return d.data.key +
    "\nDenial Amount: $" + formatNumber(d.value);

  if (data.length > 0) {
    return "Key: " + d.data.key +
      "\nValue Denial Amount : $" + formatNumber(d.value) +
      "\nClaim Count: " + formatNumber(data[0].value.claimCount) +
      "\nDenial Amount: $" + formatNumber(data[0].value.denialAmount);
  } else {
    return "Key: " + d.data.key +
      "\nValue Denial Amount : $" + formatNumber(d.value);
  }
});

d3.tip 正在使用这些数据：

var tip = d3.tip()
    .attr('class', 'd3-tip')
    .offset([-10, 0])
    .html(function(d) {

      var tooltipText = $(this).find("title").text();
      var tooltipTexts = tooltipText.split('\n');
      var totalTips = tooltipTexts.length;
      var tooltipHtml = '';
      for (var i = 0; i < totalTips; i++) {
        var tipElements = tooltipTexts[i].split(':');
        var tipKey = tipElements[0];
        var tipValue = tipElements[1];
        tooltipHtml += "<div><strong>" + tipKey + "</strong> <span style='color:red'>" + tipValue + "</span></div>";
      }
      return tooltipHtml;
      /*return "<strong>" + d.key + "</strong> <span style='color:red'>" + d.value + "</span>";*/
    })

问题是我们的客户端不喜欢默认浏览器title 和d3-tip。我们只对d3-tip 感兴趣，而不是默认的title 标签

请注意，不是 HTML 的 title 属性可以通过 e.preventDefault() 禁用

【问题讨论】：

为什么不直接计算 d3.tip html 函数中的文本呢？代码必须在title 中并没有什么特别的原因。然后是.renderTitle(false) 删除标题元素。
@Gordon Okey，但是我应该在哪里存储额外的数据？我不仅需要key 和value，因此使用了reduce
?我没有看到任何额外的数据存储在这里。您应该能够毫无问题地移动代码。 denialGroup 是独立的，可以从 d3-tip 和 .title 使用。

标签： javascript d3.js svg title dc.js

【解决方案1】：

从美学角度来看，答案有点晚，但很重要。您可以简单地返回一个空字符串，现代浏览器不会显示来自标题标签的默认提示：

.title(d => '')

【讨论】：