我想让 x 轴的标签可点击,以便文本包含链接。
这是迄今为止我的代码的一个 fiddle :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);
关于javascript - D3 - x 轴的标签是链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26777310/