我正在阅读一个csv文件并希望在顶部绘制标题(ID)我想给href这将帮助我打开一个javascript窗口(新页面)。我尝试使用xlink:href:即使在元素href写入鼠标移动ID时,我没有指向点击的指针。
var geneldata = canvas.selectAll("text.gene")
.data(data)
.enter()
.append("text")
.transition()
.delay(1)
.duration(1500)
.attr("class", "gene")
.attr("font-family", "Arial")
.attr("font-size", "12px")
.attr("x", function (d) {
var labelx = d.source;
var labelx_len = genesetx.length;
var labelxmatches = 0;
for (var i = 0; i < labelx_len; i++) {
if (genesetx[i] == labelx) {
labelxmatches++;
}
}
if (labelxmatches == 0) {
genesetx.push(d.source);
return genelistxscale;
}
})
.attr("y", function (d) {
var labelx = d.source;
var labelx_len = genesety.length;
var labelxmatches = 0;
for (var i = 0; i < labelx_len; i++) {
if (genesety[i] == labelx) {
labelxmatches++;
}
}
if (labelxmatches == 0) {
genesety.push(d.source);
genelistyscale = genelistyscale + wspace;
return genelistyscale;
}
})
.text(function (d) {
var labelx = d.source;
var labelx_len = geneset.length;
var labelxmatches = 0;
for (var i = 0; i < labelx_len; i++) {
if (geneset[i] == labelx) {
labelxmatches++;
}
}
if (labelxmatches == 0) {
geneset.push(d.source);
return labelx;
}
});
var labeldata = canvas.selectAll("text.samples")
.data(data)
.enter()
.append("text")
.transition()
.delay(1)
.duration(1500)
.attr("class", "samples")
.attr("font-family", "Arial")
.attr("font-size", "12px")
.attr("xlink:href", function (d) {
return "http://www.google.com";
})
.attr("x", function (d) {
var labelx = d.target;
var labelx_len = datasetx.length;
var labelxmatches = 0;
for (var i = 0; i < labelx_len; i++) {
if (datasetx[i] == labelx) {
labelxmatches++;
}
}
if (labelxmatches == 0) {
datasetx.push(d.target);
xdatascale = xdatascale + wspace;
return xdatascale;
}
})
.attr("y", function (d) {
var labelx = d.target;
var labelx_len = datasety.length;
var labelxmatches = 0;
for (var i = 0; i < labelx_len; i++) {
if (datasety[i] == labelx) {
labelxmatches++;
}
}
if (labelxmatches == 0) {
datasety.push(d.target);
return ydatascale;
}
})
.attr("transform", function (d) {
var labelx = d.target;
var labelx_len = datasett.length;
var labelxmatches = 0;
for (var i = 0; i < labelx_len; i++) {
if (datasett[i] == labelx) {
labelxmatches++;
}
}
if (labelxmatches == 0) {
datasett.push(d.target);
x1 = x1 + wspace;
return "rotate(270 " + x1 + ",25)";
}
});
答案 0 :(得分:5)
您可以将href
事件附加到click
元素,而不是添加text
属性。因此,当点击text
元素时,将打开一个新窗口,其中url链接到text
元素。
var labeldata = canvas.selectAll("text.samples")
.data(data)
.enter()
.append("text")
.transition()
.delay(1)
.duration(1500)
.attr("class", "samples")
.attr("font-family", "Arial")
.attr("font-size", "12px")
.on("click", function() { window.open("http://google.com"); }); // when clicked, opens window with google.com.
答案 1 :(得分:3)
您可以动态添加xlink:href,如this:
var data = ['a', 'b', 'c'];
var svg = d3.select("body").append("svg")
.attr({
xmlns: "http://www.w3.org/2000/svg",
xlink: "http://www.w3.org/1999/xlink",
width: 100,
height: 300
})
.selectAll("a")
.data(data)
.enter().append("a")
.attr({"xlink:href": "#"})
.on("mouseover", function(d, i){
d3.select(this)
.attr({"xlink:href": "http://example.com/" + d});
})
.append("text")
.attr({x: 10, y: function(d, i){ return i*15+15; }})
.text(function(d, i){ return d; });