Javascript D3.js Dc.js将事件侦听器绑定到axis标记标签

我需要将事件侦听器绑定到图表中每个刻度的标签（不是轴标签，而是每个刻度上的数据标签）。 让我们以这个图表为例

我想说的是

 *.on('click', function(){console.log("click!")}) 

对于轴上的每个水果名称（例如，当我单击“苹果”或“香蕉”…文本时，它应该听我的单击。我尝试了几次，但都失败了，例如：

d3.selectAll("g.axis.x g.tick text").on("click", function(){console.log("Mouse click")})

你能帮我看看是否能解决这个问题吗？

---

感谢您的帮助！

调用

xAxis

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
  .selectAll('text')
  .style('cursor', 'pointer')
  .on('click', barClick);

function barClick(){
    alert('click')
}

这是一把小提琴：

var保证金={
前40名，
右:20,，
底数：30，
左：40
},
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var formatPercent=d3.format（“.0%”）；
var x=d3.scale.ordinal（）
.rangeRoundBands（[0，宽度]，.1）；
变量y=d3.scale.linear（）
.范围（[高度，0]）；
var xAxis=d3.svg.axis（）
.比例（x）
.东方（“底部”）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）
.格式（格式百分比）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var data=JSON.parse（document.getElementById（'data'）.innerHTML）；
//d3.tsv（“data.tsv”），类型，功能（错误，数据）{
x、 域（data.map）（函数（d）{
回信；
}));
y、 域（[0，d3.max（数据，函数（d））{
返回d.frequency；
})]);
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）
.selectAll（'text'）
.style（'光标'，'指针'）
.on（'click'，bar click）；
函数barClick（）{
警报（'单击'）
}
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“.71em”）
.style（“文本锚定”、“结束”）
.文本（“频率”）；
svg.selectAll（“.bar”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“类”、“条”）
.attr（“x”，函数（d）{
返回x（d.letter）；
})
.attr（“宽度”，x.rangeBand（））
.attr（“y”，函数（d）{
返回y（d.频率）；
})
.attr（“高度”，功能（d）{
返回高度-y（d.频率）；
})
//});
功能类型（d）{
d、 频率=+d.频率；
返回d；
}

正文{
字体：10px无衬线；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
.酒吧{
填充物：橙色；
}
.bar:悬停{
填充：橙色；
}
.x轴路径{
显示：无；
}

[{
“信”：“A”，
“频率”：0.08167
},
{
“信”：“B”，
“频率”：0.01492
},
{
“信”：“C”，
“频率”：0.02780
},
{
“信”：“D”，
“频率”：0.04253
},
{
“信”：“E”，
“频率”：0.12702
},
{
“信”：“F”，
“频率”：0.02288
},
{
“字母”：“G”，
“频率”：0.02022
},
{
“字母”：“H”，
“频率”：0.06094
},
{
“信”：“我”，
“频率”：0.06973
},
{
“信”：“J”，
“频率”：0.00153
},
{
“字母”：“K”，
“频率”：0.00747
},
{
“字母”：“L”，
“频率”：0.04025
},
{
“字母”：“M”，
“频率”：0.02517
},
{
“字母”：“N”，
“频率”：0.06749
},
{
“信”：“O”，
“频率”：0.07507
},
{
“字母”：“P”，
“频率”：0.01929
},
{
“信”：“Q”，
“频率”：0.00098
},
{
“字母”：“R”，
“频率”：0.05987
},
{
“信”：“S”，
“频率”：0.06333
},
{
“字母”：“T”，
“频率”：0.09056
},
{
“字母”：“U”，
“频率”：0.02758
},
{
“字母”：“V”，
“频率”：0.01037
},
{
“字母”：“W”，
“频率”：0.02465
},
{
“字母”：“X”，
“频率”：0.00150
},
{
“字母”：“Y”，
“频率”：0.01971
},
{
“字母”：“Z”，
“频率”：0.00074
}
]

@Gordon

感谢将我转发至正确答案：

原因：dc.js在其CSS中阻止其轴上的指针事件。
解决方案：添加css

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

---

这是一个只有d3的答案。可能还不清楚，但问题是关于dc.js的。@Gordon哦，我'；对不起。我在那里被弄糊涂了。OP能做的是用d3.js而不是dc.js创建轴和刻度。我不知道dc.js是如何工作的，但这应该工作的。谢谢大家：）谢谢，aditya.kkk29。然而，我关心的是由DC.js构建的图表，例如使用提供的页面中的示例，我们如何将事件侦听器绑定到它！那很好用。希望它能在DC.js文档中被注意到。它不需要被记录。