如何給h3給d3js文本元素

Question

我讀了一個csv文件，並想繪製頭部（ID）的頂部我想給href，這將幫助我打開一個JavaScript窗口（新頁面）。我試過使用xlink：href：即使在元素href被寫入的同時mouseovering ID我沒有指向點擊的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)"; 
     } 
    }); 

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。

Answer 2

您可以動態地添加一個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; });