d3.js - 如何将 href 赋予 d3js 文本元素

Question

我正在阅读一个 csv 文件并想在顶部绘制标题(ID)，我想提供 href 这将帮助我打开一个 javascript 窗口(新页面)。我尝试使用 xlink:href: 即使在将鼠标悬停在 ID 上时写入的元素 href 中，我也没有要单击的指针。

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

Answer 1

而不是添加 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.

这是一个 example fiddle .