我正在使用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',...)函数,它就像魅力一样。但是我对这个条形图仍然有困难。
答案 0 :(得分:2)
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;
}
你应该再次开始获取这些鼠标事件了!