Bud*_*ril 6 svg hyperlink d3.js
我正在使用 d3 绘制图表(我正在使用第 1 个示例: https: //gist.github.com/keiranlovett/8766741)。我需要添加一个链接。我正在添加文本,并尝试将其设为链接,但它没有显示为链接(我使用的是 IE 11):
svg.append("g") //without doing this, impossible to put grid lines behind text
.attr({
xmlns: "http://www.w3.org/2000/svg",
xlink: "http://www.w3.org/1999/xlink",
width: 100,
height: 300
})
.attr({ "xlink:href": "#" })
.on("mouseover", function (d, i) {
//alert('aaa');
d3.select(this)
.attr({ "xlink:href": "http://example.com/" + "eeeeeeeeeeeeeeeeeee" });
})
.selectAll("text")
.data(tasks)
.enter()
.append("text")
.text(function (d) {
if (ammendmentsLinks.indexOf(d.contract) < 0) {
ammendmentsLinks = ammendmentsLinks + d.contract + ";";
return d.contract;
//return "";
}
else {
return "";
}
})
.attr("x", 20)
.attr("y", function (d, i) {
return i * 20;
})
.attr("font-size", 11)
.attr("text-anchor", "start")
.attr("text-height", 14)
.on("click", function (d) {
return click(d.contract);
});
Run Code Online (Sandbox Code Playgroud)
我还从http://jsfiddle.net/christopheviau/B9zcF/添加了一些代码行以使文本成为链接,但它不起作用。
如何使我的文本成为链接?
小智 4
尝试更改以下行:
d3.select(this)
.attr({ "xlink:href": "http://example.com/" + "eeeeeeeeeeeeeeeeeee" });
Run Code Online (Sandbox Code Playgroud)
到
d3.select(this)
.wrap("<a xlink:href \"http://example.com/\"></a>")
.text("eeeeeeeeeeeeeeeeeee");
Run Code Online (Sandbox Code Playgroud)
并确保<svg>标签已xmlns:xlink="http://www.w3.org/1999/xlink"指定。