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单击元素时，将打开一个新窗口，其中包含链接到该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.

这是一个示例小提琴。

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