Question

我正在使用dc.js的条形图。我在标签X轴上提供工具提示或标题时遇到问题。

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

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

chart.selectAll（'g.x text'） .attr（'transform'，'translate（-40,20）rotate（315）'） .attr（'onMouseOver'，'getTooltip（this）'）;
我在selectAll（g.x文本）时添加了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;
        });

顺便说一下，当我为热图dc.js选择所有（x轴文本标签）时，我使用.on（'mouseover'，...）函数，它就像魅力一样。但是我对这个条形图仍然有困难。

Answer 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;
}

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

DC.js条形图 - 在X轴标签

1 个答案: