D3将图像附加到表头的方法 [英] D3 Method of Appending Images to a Table Header

问题描述

在HTML中，我通常向表头添加图片的方式如下：

 < th> ; img src = image.png alt =height = 20 width = 20>< / img>< / th> 
  

HTML方式非常简单直观。但是，我已经切换到D3创建表，我的头部代码是：

  var columns = ，'Column Y'，'Column Z'] 
 
 var table = d3.select（'＃table_container'）。append（'table'），
 thead = table.append thead'）
 tbody = table.append（'tbody'）; 
 
 thead.append（'tr'）
 .selectAll（'th'）
 .data（columns）
 .enter（）
 .append （'th'）
 .text（function（column）{return column;}）; 
  

我的问题是：如何将图片附加到表格标题d3？

感谢阅读

解决方案

只需添加 img 并使用 src 作为其属性：

  var columns = [{src：http://iconbug.com/data/3a/256/77c71e95885bf94c06c7c68ccb63b131。 png}，{src：http://iconbug.com/data/3a/256/9f8cd17bf12b1667d6c4b31b889b3034.png}，{src：http://iconbug.com/data/b4/256/4ece97792658df143eb693c23bb991f3.png }]; var table = d3.select（body）append（'table'）; var thead = table.append（'thead'）; thead.append（'tr'）.selectAll（'th'）。 data（columns）.enter（）.append（'th'）.append（'img'）.attr（'src'，function（d）{return d.src;}）;  / pre> 
  table，th {border：1px solid gray;}  pre> 
 < script src =https://d3js.org/d3.v4.min.js >< / script>  
 

In HTML, the way I typically add an image to a table header is as follows:

<th><img src= image.png alt="" height=20 width=20></img></th>

The HTML way is very straight forward and intuitive. Yet, I have since switched to D3 to create tables, and my header code is:

var columns = ['Column X', 'Column Y', 'Column Z']

var table = d3.select('#table_container').append('table'),
    thead = table.append('thead')
    tbody = table.append('tbody');

thead.append('tr')
    .selectAll('th')
    .data(columns)
    .enter()
    .append('th')
        .text(function(column) { return column; });

My question is: How can I append images to the table headers using d3? I intend to use a different image for each header.

Thanks for reading

解决方案

Just append an img and use src as its attribute:

var columns = [
    {src:"http://iconbug.com/data/3a/256/77c71e95885bf94c06c7c68ccb63b131.png"}, 
    {src:"http://iconbug.com/data/3a/256/9f8cd17bf12b1667d6c4b31b889b3034.png"}, 
    {src:"http://iconbug.com/data/b4/256/4ece97792658df143eb693c23bb991f3.png"}
];

var table = d3.select("body").append('table');
var thead = table.append('thead');

thead.append('tr')
    .selectAll('th')
    .data(columns)
    .enter()
    .append('th')
    .append('img')
    .attr('src', function(d) {
        return d.src;
    });

table, th {
   border: 1px solid gray;
}

<script src="https://d3js.org/d3.v4.min.js"></script>

这篇关于D3将图像附加到表头的方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！