Render HTML on X-Axis Ticks

Question

I would like to render HTML on the x-axis of my D3 graph. Basically, I want each label on the axis to be a hyperlink to another column from the data.

I've tried

x.domain(data.map(function(d) { return "<a href=\"" + d.SiteUrl + "\">" + d.Name + "</a>"; }));

but it's not working, at all. Instead of getting a hyperlink I get the actual text value:

<a href="http://example.com">Something</a>

I've also tried adding

.tickFormat(function(d) { return "<a href=\"" + d.SiteUrl + "\">" + d.Name + "</a>"; })

on the x-axis, as well as altering the .attr("x", ...) to

.attr("x", function(d) { return "<a href=\"" + d.SiteUrl + "\">" + x(d.Name) + "</a>"; })

on the chart itself.

Am I missing something?

you can't append html to svg, unless you use foreign object which isn't widely used. I would suggest getting the positions of each tick and append html to that position to the parent of the svg — thatOneGuy, May 18 '16 at 09:39
I assume I can't render any HTML escape characters in the SVG as well, then? (Another issue I'm having, one of the `Name` values has `&` in it.) — Der Kommissar, May 18 '16 at 09:40
nope no can do. Check this example : http://stackoverflow.com/questions/7458546/html-in-svg-in-html uses foreign object — thatOneGuy, May 18 '16 at 09:42
What about styling the text as a link. On click of the tick change the browser location, accordingly — Cyril Cherian, May 18 '16 at 09:45
Have you seen these: [*"How to make axis tick labels hyperlinks in D3.js"*](/q/19914567), [*"Adding links to D3 axis labels"*](/q/32657205) and [*"D3 - Labeling of x axis are links"*](/q/26777310)? — altocumulus, May 18 '16 at 09:46
@altocumulus The first link got me close, but I'm getting an `undefined` for some reason. — Der Kommissar, May 18 '16 at 09:52
Ah, I see why. In that context, `d` is simply the string for the text. That won't do as I need to use a different field for text from the href. — Der Kommissar, May 18 '16 at 09:53
Also, your usage of `svg:a` is not correct. Have a look at [``](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a) on MDN as well as [this documentation](http://tutorials.jenkov.com/svg/a-element.html). — altocumulus, May 18 '16 at 09:54

score 7 · Answer 1 · answered Aug 21 '16 at 06:46

(Based on https://groups.google.com/d/msg/d3-js/zoUjrm75iCg/EJg0YhnTw3YJ)

The trick is to use svg:foreignObject (as stated by @thatOneGuy in the comments), then you can place any HTML inside the axis label. The function at html below gets passed data[i].name, where one can place arbitrary HTML.

var height = 500;

var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom")
  .tickSize(0).tickPadding(0).tickFormat(function(d) {return '';});

var tx = -5;
var ty = 2;
var tw = 50;
var th = 10;

chart.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
  .selectAll("g")
  .append("svg:foreignObject")
  .attr("width",tw)
  .attr("height",th)
  .attr("x", tx)
  .attr("y", ty)
  .append("xhtml:div")
  .attr("class", "my-x-axis-label")
  .html(function(schema) {return schema;});

CSS:

div.my-x-axis-label {
  font: 10px sans-serif;
}

Render HTML on X-Axis Ticks

1 Answers1

Linked