D3 - Marking the x-axis - these are links

Question

I would like to make the x-axis marking clickable so that the text contains links.

Here is the fiddle of my code: http://jsfiddle.net/3gLfb401/

The x-axis marking consists of the date and assembly number. The build number must be a reference. In this example, this should be sufficient if it links to google.com or something like that.

I already searched the Internet and found some things that could do this, but I don’t know how to place them.

I thought this might work:

x.html(d3.time.format("%Y-%m-%d")(d.date) + '<a href= "http://google.com" target="_blank">' + "#" + d.buildNb + "</a>") 

This is the method that currently forms the labeling text:

 function formatDataToTick(d) { return d3.time.format("%Y-%m-%d")(d.date) + " #" + d.buildNb; } 

Answer 1

Try it.

  var xLabels = svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", function(d) { return "rotate(-65)" }); var insertTspans = function(a) { var b = a.split(" "); var textNode = d3.select(this); textNode.text(""); textNode.append("tspan").text(b[0]); var link = textNode.append("tspan").text(b[1]); link.style("cursor", "pointer") .style("fill","blue") .style("text-decoration","underline") .on("click", function(a) { document.location.href = "http://www.example.com/" + a; }); }; xLabels.each(insertTspans);