DC.js 条形图 - 在 X 轴标签上提供工具提示或标题答案

【问题标题】：DC.js Barchart- provide tooltip or title on the X axis labelsDC.js 条形图 - 在 X 轴标签上提供工具提示或标题
【发布时间】：2018-06-12 09:35:27
【问题描述】：

我正在处理来自 dc.js 的条形图。我无法在标签 X 轴上提供工具提示或标题。

我需要轴工具提示的原因是我向达到最大长度的文本标签添加了一个功能，它将在其中应用“...”。工具提示将帮助用户查看该 X 轴文本标签的全文。以下是我已经完成但没有奏效的以下内容。

我使用 chart.selectAll(g.x text) ** 或 .text 并添加了一个不起作用的 .on('mouseover', ...) 函数。我查看了开发人员工具，当我为标签选择元素时看到了事件，但当我将鼠标悬停在它上面时它没有出现。
我手动添加了“onMouseOver”的属性及其功能，但也没有用。这是我使用的代码。 getTooltip 函数有一个console.log 消息来查看它是否触发。

chart.selectAll('g.x text') .attr('变换', '翻译(-40,20) 旋转(315)') .attr('onMouseOver', 'getTooltip(this)');
我在 selectAll(g.x text) 时添加了一个 title 属性，但这不起作用。

我的想法不多了，这需要尽快完成。请问你能帮助我吗？

条形图 dc.js 的 X 轴标签上是否可以有工具提示或标题？

谢谢。这是我在下面做的代码。

        barchart
    .title(function(v) {
        var total = d3.format(',d') ( v.value.Total );
        return lve_cit_bucketsLookup[v.key] + " Total:" + total;
    }).renderlet(function (chart) {
       // rotate x-axis labels
     chart.selectAll('g.x text')
         .attr('transform', 'translate(-40,20) rotate(315)') 
         /* .attr('onMouseOver', 'getTooltip(this)') */;

       // works with .tick
        chart.selectAll('g.x text')
        .on('mouseover', function(d){
                console.log("mouseover fool: " + d) 
            div.transition()
                .duration(200)
                .style("opacity", .9);
            div.html("dest")
            .style("left", (d3.event.pageX) + "px")     
         .style("top", (d3.event.pageY - 28) + "px"); 
        })
        .on('mouseout', function(d) {
             div.transition()        
                .duration(500)      
                .style("opacity", 0);   
        }); 

   })
    .xAxis().tickFormat(function(v) {
        var getLookup = lve_cit_bucketsLookup[v];
        if(getLookup.length > 10)
            return getLookup.substring(0,10) + '...';
        else
            return getLookup;
        });

顺便说一句，当我 selectAll(x 轴文本标签) 用于热图 dc.js 时，我使用了 .on('mouseover', ...) 函数，它就像一个魅力。但是我仍然无法使用此条形图。

【问题讨论】：

标签： d3.js dc.js

【解决方案1】：

dc.js 在其坐标轴 in its CSS 上阻止指针事件。

我认为这是阻止文本被意外选中的一种严厉方式，现在最好使用user-select: none 来解决。 (I've filed an issue to investigate this.)

它是 explicitly re-enabled for heatmaps，因为它具有选择行或列的功能，这就是为什么它对你有用。

无论如何，您可以像这样添加自己的 CSS 规则来覆盖 dc.js：

.dc-chart g.axis text {
    pointer-events: auto;
}

你应该再次开始获取那些鼠标事件！

【讨论】：