在 X 轴刻度上渲染 HTML答案

【问题标题】：Render HTML on X-Axis Ticks在 X 轴刻度上渲染 HTML
【发布时间】：2016-08-21 14:46:08
【问题描述】：

我想在我的 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>"; })

图表本身。

我错过了什么吗？

【问题讨论】：

您不能将 html 附加到 svg，除非您使用未广泛使用的外来对象。我建议获取每个刻度的位置并将 html 附加到该位置到 svg 的父级
我假设我也无法在 SVG 中呈现任何 HTML 转义字符，然后呢？（我遇到的另一个问题是，Name 值之一包含&amp;。）
不，不能。检查此示例：stackoverflow.com/questions/7458546/html-in-svg-in-html 使用外来对象
如何将文本设置为链接。单击勾号后，相应地更改浏览器位置
你见过这些吗："How to make axis tick labels hyperlinks in D3.js"、"Adding links to D3 axis labels" 和 "D3 - Labeling of x axis are links"？

标签： javascript html d3.js graph

【解决方案1】：

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

诀窍是使用svg:foreignObject（如cmets 中@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;
}

【讨论】：