D3.js Dc.js Binding Event listener to axis tick label

Question

I have a fundamental needs to bind an event listener to the label of each tick in my chart (not axis label, but the data label on each tick). Let's take this chart for example.

http://dc-js.github.io/dc.js/examples/ordinal-bar.html

I want to put something like,

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

to each fruit name on a axis (such as, when I click on "apple" or "banana"... text, it should listen to my click. I have been trying few attempts but all failed, such as :

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

Can you help to show me if anyway can resolve this? Thanks for helping!

Answer 1

@Gordon

Thanks for forwarding me to the right answer here:

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

REASON: dc.js blocks pointer events on its axes in its CSS.
SOLUTION: Adding css

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

Answer 2

Just select all the text elements when you call the 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')
}

Here's a fiddle:

var margin = {
    top: 40,
    right: 20,
    bottom: 30,
    left: 40
  },
  width = 960 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

var formatPercent = d3.format(".0%");

var x = d3.scale.ordinal()
  .rangeRoundBands([0, width], .1);

var y = d3.scale.linear()
  .range([height, 0]);

var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom");

var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left")
  .tickFormat(formatPercent);



var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");



var data = JSON.parse(document.getElementById('data').innerHTML);

//d3.tsv("data.tsv", type, function(error, data) {
x.domain(data.map(function(d) {
  return d.letter;
}));
y.domain([0, d3.max(data, function(d) {
  return d.frequency;
})]);

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

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
  .append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("Frequency");

svg.selectAll(".bar")
  .data(data)
  .enter().append("rect")
  .attr("class", "bar")
  .attr("x", function(d) {
    return x(d.letter);
  })
  .attr("width", x.rangeBand())
  .attr("y", function(d) {
    return y(d.frequency);
  })
  .attr("height", function(d) {
    return height - y(d.frequency);
  })

//});

function type(d) {
  d.frequency = +d.frequency;
  return d;
}

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.bar {
  fill: orange;
}

.bar:hover {
  fill: orangered;
}

.x.axis path {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script type="application/json" id="data">
  [{
      "letter": "A",
      "frequency": 0.08167
    },
    {
      "letter": "B",
      "frequency": 0.01492
    },
    {
      "letter": "C",
      "frequency": 0.02780
    },
    {
      "letter": "D",
      "frequency": 0.04253
    },
    {
      "letter": "E",
      "frequency": 0.12702
    },
    {
      "letter": "F",
      "frequency": 0.02288
    },
    {
      "letter": "G",
      "frequency": 0.02022
    },
    {
      "letter": "H",
      "frequency": 0.06094
    },
    {
      "letter": "I",
      "frequency": 0.06973
    },
    {
      "letter": "J",
      "frequency": 0.00153
    },
    {
      "letter": "K",
      "frequency": 0.00747
    },
    {
      "letter": "L",
      "frequency": 0.04025
    },
    {
      "letter": "M",
      "frequency": 0.02517
    },
    {
      "letter": "N",
      "frequency": 0.06749
    },
    {
      "letter": "O",
      "frequency": 0.07507
    },
    {
      "letter": "P",
      "frequency": 0.01929
    },
    {
      "letter": "Q",
      "frequency": 0.00098
    },
    {
      "letter": "R",
      "frequency": 0.05987
    },
    {
      "letter": "S",
      "frequency": 0.06333
    },
    {
      "letter": "T",
      "frequency": 0.09056
    },
    {
      "letter": "U",
      "frequency": 0.02758
    },
    {
      "letter": "V",
      "frequency": 0.01037
    },
    {
      "letter": "W",
      "frequency": 0.02465
    },
    {
      "letter": "X",
      "frequency": 0.00150
    },
    {
      "letter": "Y",
      "frequency": 0.01971
    },
    {
      "letter": "Z",
      "frequency": 0.00074
    }
  ]
</script>