d3イメージがテーブル外にレンダリングされています

Question

JSONファイルを読み込んでいるテーブルを作成していますが、カラム1-3と7に文字列を出力する必要があります。残りのカラム（4-6）は0または1私は文字列として実装することができました： "OK"と "NOT OK"。しかし、代わりに画像を出力したいのですが、関数addCheck（）とaddX（）を呼び出すと、画像はテーブルの外側にレンダリングされます。

私は.text（）の代わりに.append（ 'image'）の行のどこかにあるべきですが、私は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