d3將html鏈接添加到表中的一列數據中

我是新來的d3和Javascript，我試圖給指定數據列中的每個值添加一個<a>元素（帶有href屬性）。目前我使用下面的代碼來生成表：d3將html鏈接添加到表中的一列數據中

function tabulate(data, columns) { 
var table = d3.select("#data_table").append("table"), 
    thead = table.append("thead"), 
    tbody = table.append("tbody"); 

// append the header row 
thead.append("tr") 
    .selectAll("th") 
    .data(columns) 
    .enter() 
    .append("th") 
    .text(function(column) { 
     return column; 
    }) 
    .on('click', function (d) { 
     rows.sort(function (a, b) { 
      if (isNaN(a[d])) { 
       return d3.ascending(a[d], b[d]); 
      } 
      else { 
       return b[d] - a[d]; 
      } 
     }); 
    }); 
// create a row for each object in the data 
var rows = tbody.selectAll("tr") 
    .data(data) 
    .enter() 
    .append("tr"); 

// create a cell in each row for each column 
var cells = rows.selectAll("td") 
    .data(function(row) { 
     return columns.map(function(column) { 
      return { 
       column: column, value: row[column] 
      }; 
     }); 
    }) 
    .enter() 
    .append("td") 
    .html(function(d) { 
     return (d.value); 
    }); 

return table; 
} 
//render the data 
tabulate(data, ["NAME", "1", "2", "3", "4"]);

我要盡一切價值在「名稱」列中的超鏈接，根據單元格中的數值的網站。 E.G .:如果名稱列中有一個值爲「my_value」的值，它將是「http://test/my_value」的超鏈接。任何幫助表示讚賞！

來源

2016-06-22 Jeremy G

你必須過濾數據一樣，後追加一個鏈接：

cells.filter(function(d, i) { return i === 0}) 
    .append("a") 
    .attr("href", function(d) { 
     return "http://test/" + d.value; 
    }) 
    .html(function(d) { 
     return (d.value); 
    });

見https://jsfiddle.net/o64e570x/1/

也有可能與列名稱進行篩選與

cells.filter(function(d, i) { return d.column === "NAME"})

來源

2016-06-22 20:34:18

偉大工程的感謝！我之前沒有遇到.filter方法。我假設有一個簡單的方法來修改過濾器函數來過濾基於列名而不是索引？ –

當然，使用'.filter（function（d，i）{return d.column ===「NAME」}）' –

d3將html鏈接添加到表中的一列數據中

回答

相關問題