[Solved]-Render HTML on X-Axis Ticks-d3.js

(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;
}