如何给d3js文本元素添加href链接

Question

我正在读取一个csv文件，并希望在顶部绘制标题(IDs)，我想为其提供href以帮助我打开一个JavaScript窗口(新页面)。 我尝试使用xlink:href：即使在元素href中编写了鼠标悬停在IDs上时，我也没有指针可以单击。

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)";
        }
    });

- user2637905

---

https://dev59.com/8Gcs5IYBdhLWcg3wJQe7#13109162 做得比下面的答案更好。 - Laizer

Answer 1

不需要添加href属性，只需将click事件附加到text元素上即可。因此，当单击text元素时，将打开一个新窗口，并链接到text元素的URL。

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.

这是一个示例代码。

- icanc

---

我在控制台中收到了以下错误：uncaught TypeError: Object [object Array] has no method 'on' - user2637905

这是因为您在transition()之后附加了事件。您需要在append("text")之后添加它，即在其之前。 - icanc

当用户尝试通过按下“cmd/ctrl”来控制是否打开新标签页时，它将无法工作。 - Eugene Krevenets

Answer 2

您可以像这样动态添加xlink：href：

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; });

- Biovisualize

---

我收到了这个错误：Uncaught TypeError: Object [object Array] has no method 'on'。 - user2637905

不确定这种语法在新的d3版本中是否仍然有效，但这也可以工作：... .join((enter) =>enter.append("a").attr("target", "_blank").attr("xlink:href", (d) => d.data.url || undefined), (update) => update, (exit) => exit.remove()).append("text") ... - thadk