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

Question

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

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

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

chart.selectAll('g.x text') .attr('transform', 'translate(-40,20) rotate(315)') .attr('onMouseOver', 'getTooltip(this)');
我在 selectAll(g.x text) 时添加了一个 title 属性，但是没有用。

我运行没主意了，这需要尽快完成。你能帮帮我吗？

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

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

        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', ...) 函数，它奇迹般有效。但是这个条形图仍然有问题。

Answer 1

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

我认为这是一种防止文本被意外 select 编辑的粗暴方法，现在最好用 user-select: none 来解决这个问题。 (I've filed an issue to investigate this.)

它是 explicitly re-enabled for heatmaps，因为 select 行或列功能，这就是它对您有用的原因。

无论如何，您可以添加自己的 CSS 规则来覆盖 dc.js，如下所示：

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

您应该再次开始获取这些鼠标事件！

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

DC.js Barchart- provide tooltip or title on the X axis labels

d3.js

dc.js