如何在D3.js中创建轴刻度标签超链接

Question

In D3.js, how do I assign HTML elements/attributes to tick labels? I'm specifically interested in making them hyperlinks, but it could be generalized to making them images, or something strange like alternating div classes.

var data = [{"count": 3125,"name": "aaa"}, {"count": 3004,"name": "bbb"}...

y = d3.scale.ordinal()
    .rangeRoundBands([0, height], 0.1)
    .domain(data.map(function (d) {
      return d.name;
    }))

yAxis = d3.svg.axis().scale(y)
vis.append("g")
   .attr("class", "y axis")
   .call(yAxis)

http://jsfiddle.net/SFDrv/

So in the JSfiddle, how would I link to www.example.com/aaa, www.example.com/bbb, www.example.com/ccc, etc?

Answer 1

For the JSfiddle you posted, you can create a selection of all text that are strings (these are the y-axis ticks), and then use .on("click", function) , to link each label. Here's a working example:

d3.selectAll("text")
    .filter(function(d){ return typeof(d) == "string"; })
    .style("cursor", "pointer")
    .on("click", function(d){
        document.location.href = "http://www.example.com/" + d;
    });

I forked your JSFiddle and have the whole example there: http://jsfiddle.net/mdml/Qm9U7/ .

A better solution would be to have an array of y-axis values and to use those to filter the text elements in the document, instead of testing whether each text element's data is a string. The best way to do that depends on the rest of the code, however, so it may differ from application to application.

Answer 2

To create axis with images you need to create them yourself and not use the d3.svg.axis() . This creates floated li tags with certain width...

// generate axis
x = d3.scale.linear().range([min, max]).domain([minValue, maxScaleValue]);
xAxis = d3.scale.identity().domain([minValue, maxScaleValue]);
var ticks = xAxis.ticks(10);
if (ticks.length) {
    var tickDiff = Math.abs(ticks[1] - ticks[0]);
    scope.legend
        .selectAll('li')
        .data(ticks)
        .enter()
        .append('li')
        .text(xAxis)
        .style('width', x(tickDiff));
}
scope.legend
    .selectAll("li")
    .data(ticks)
    .exit()
    .remove();

Also there is useful article about d3 axis that helped me a lot.