Question

我正在创建一个正在读取JSON文件的表，它需要在1-3和7列输出字符串。其余列（4-6）显示0或1，我能够实现字符串：＆＃34; OK＆＃34;并且＆＃34;不行＆＃34;。但是，我希望它们能够输出图像，但是当我调用addCheck（）和addX（）函数时，图像会在表格之外呈现。

我是积极的，而不是.text（）它应该在.append（＆＃39;图像＆＃39;）的某个地方，但因为我在D3（和一般的JS）相当新，我有难以概念化如何仅将图像附加到第4-6列，而不会影响需要作为字符串输出的其余列。

提前感谢您的帮助！

/* source: http://bl.ocks.org/jfreels/6734025*/

function addCheck() {
    var img = document.createElement('img');
    img.src = "images/success.png";
    document.body.appendChild(img);
}

function addX() {
    var img = document.createElement('img');
    img.src = "images/error.png";
    document.body.appendChild(img);
}

d3.json(url, function (error,data) {

  function tabulate(data, columns) {
        var table = d3.select('.boxflags-panel').append('table');
        var thead = table.append('thead');
        var tbody = table.append('tbody');

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

        // 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')
            .text(function (d) {     //PROBABLY SHOULD BE .append() HERE???
                if (d.value === 0) {
                    //return "OK";
                    return addCheck();
                } else if (d.value === 1){
                    //return "NOT OK";
                    return addX();
                }   return d.value;         
                });

      return table;
    }
    // render the table(s)
    tabulate(data, ['COL1', 'COL2', 'COL3', 'COL4', 'COL5', 'COL6', 'COL7']);

});

Answer 1

您需要过滤要添加图像的单元格的单元格选择。您可以为过滤的单元格添加<img>元素：

// 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')
.text(function (d) { if (d.value !== 1 && d.value !== 0) return d.value;});

// add the imges when the value is 0 or 1
cells.filter(function(d) { return (d.value === 1 || d.value ===0); })
.append('img')
.attr("src", function(d) {
      return d.value===1 ? "images/success.png":"images/error.png";
});

这是JS Bin

d3图像在表格外呈现

1 个答案: