DC.js Barchart-在X轴标签上提供工具提示或标题 [英] DC.js Barchart- provide tooltip or title on the X axis labels

问题描述

我正在制作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)rotation(315)') .attr('onMouseOver'，'getTooltip(this)');

• 当我选择全部(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选择all(x轴文本标签)时，我使用了.on('mouseover'，...)函数，它的工作原理就像一个超级按钮.但是我仍然在这个条形图上遇到麻烦.

解决方案

dc.js阻止其轴上的指针事件我已提交问题进行调查.)

它是专门为热图重新启用是因为选择行或列功能，所以对您有效.

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

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

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

I'm working on a barchart from dc.js. I'm having trouble providing a tooltip or a title on the labels X axis.

The reason why I need axis tooltips is that I added a feature to text labels that reaches a maximum length and it will apply the '...' into it. The tooltip will help the users to view the full text of that X axis Text labels. Here are the following that i have done but it didnt work.

• I use chart.selectAll(g.x text) **or .text and add an .on('mouseover', ...) function which that didn't work. I look at the developer tool and i see the events when i select the element for the labels but its not appearing when i hover over it.

• I manually added an attribute of 'onMouseOver' and its function and that also didn't work. Here is the code I used. The getTooltip function have a console.log message to see if it triggers.

  chart.selectAll('g.x text') .attr('transform', 'translate(-40,20) rotate(315)') .attr('onMouseOver', 'getTooltip(this)');

• I added a title attribute when I selectAll(g.x text) but that didn't work.

I'm running out of ideas and this needs to be done soon. Please can you assist me?

Is it possible to have a tooltip or a title on the X axis labels for barchart dc.js?

Thank you. Here is the code I did below.

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

By the way, I used the .on('mouseover', ...) function when I selectAll(x axis text labels) for the heatmap dc.js and it works like a charm. But I'm still having trouble for this barchart.

解决方案

dc.js blocks pointer events on its axes in its CSS.

I think this was a heavy-handed way to stop the text from accidentally being selected, which nowadays would better be addressed with user-select: none. (I've filed an issue to investigate this.)

It's explicitly re-enabled for heatmaps because of the select row or column feature, which is why that worked for you.

Anyway, you can add your own CSS rule to override dc.js like this:

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

and you should start getting those mouse events again!

这篇关于DC.js Barchart-在X轴标签上提供工具提示或标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！