D3-x轴的标签是链接

D3 - Labeling of x axis are links

本文关键字：链接 标签 D3-x      更新时间：2023-09-26

我想让x轴的标签可以点击，这样文本中就包含了链接。

到目前为止，我的代码如下：http://jsfiddle.net/3gLfb401/

x轴标签由日期和内部版本号组成。内部版本号应该是一个链接。在这个例子中，如果它链接到google.com或其他什么，就足够了。

我已经在互联网上搜索了一下，发现了一些东西，也许可以，但我不知道如何放置。

我认为这样的东西可以工作：

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

这是目前形成标签文本的方法：

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

试试这个。

 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);
相关文章：