在X軸刻度上渲染HTML

Question

我想在我的D3圖的x軸上呈現HTML。 基本上，我希望軸上的每個標簽都是數據中另一列的超鏈接。

我試過了

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

但它根本不起作用。 而不是獲取超鏈接我得到實際的文本值：

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

我也嘗試過添加

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

在x軸上，以及將.attr("x", ...)改為

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

在圖表上。

我錯過了什么嗎？

Answer 1

（基於https://groups.google.com/d/msg/d3-js/zoUjrm75iCg/EJg0YhnTw3YJ ）

訣竅是使用svg:foreignObject （如評論中的@thatOneGuy所述），然后您可以在軸標簽內放置任何HTML。 下面html的函數傳遞data[i].name ，其中可以放置任意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;
}