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链接添加到表中的一列数据中

回答

相关问题