title: Append an SVG Element to HTML Table Cell Using D3.js
body: <p>I am trying to append an SVG circle to cells within a table based on the values in those cells using D3.</p>
  
  <p>Here's what I'm trying to get:
  <div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>        .canvasBackground {
              background-color: white
          }
          
          .table {
              border-collapse: collapse;
              border: #d0d4d5 solid 1px;
              border-spacing: 0px;
              font: normal 11px Georgia, 'Times New Roman', Times, serif;
              letter-spacing: 1px;
              line-height: 14px;
              padding: 5px;
              width: 100%
          }
          
          .headerStyle {
              vertical-align: middle;
          }
          
          .headerRowStyle {
              background-color: #fff;
              border-bottom: 3px solid #ccc;
              color: #4078a9;
              font-size: 14px;
              height: 48px;
              line-height: 14px;
              padding: 10px 5px 5px 5px
          }
          
          .headerCellStyle {
              border-left: 1px solid #d0d4d5;
  
          }
  
          .tableBodyStyle {
              text-align: left;
              vertical-align: middle
          }
          
          .tableRowStyle {
              background-color: #fff;
              border-bottom: 1px solid #d0d4d5;
              color: #565656;
              padding: 5px 5px
          }
          
          .tableCellStyle {
              border: 1px solid #d0d4d5;
              
          }        
         </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;div class="canvasBackground"&gt;
      &lt;div class="tables"&gt;
      &lt;table id="sample" class="table display"&gt;
          &lt;thead class="headerStyle"&gt;
              &lt;tr class="headerRowStyle"&gt;
                  &lt;th&gt;Title&lt;/th&gt;
                  &lt;th&gt;ID&lt;/th&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                  &lt;th&gt;Color 1&lt;/th&gt;
                  &lt;th&gt;Color 2&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody class="tableBodyStyle"&gt;
              &lt;tr class="tableRowStyle"&gt;
                  &lt;td class="tableCellStyle"&gt;Title 1&lt;/td&gt;
                  &lt;td class="tableCellStyle"&gt;00001&lt;/td&gt;
                  &lt;td class="tableCellStyle"&gt;Rena&lt;/td&gt;
                  &lt;td class="tableCellStyle"&gt;
                      &lt;svg width="50" height="50"&gt;
                          &lt;g&gt;
                              &lt;circle cx="28" cy="25" r="20" style="fill: rgb(244, 248, 94);"&gt;&lt;/circle&gt;
                              &lt;text dy="30" dx="24" style="fill: rgb(86, 86, 86);"&gt;Y&lt;/text&gt;
                          &lt;/g&gt;
                      &lt;/svg&gt;
                  &lt;/td&gt;
                  &lt;td class="tableCellStyle"&gt;
                      &lt;svg width="50" height="50"&gt;
                          &lt;g&gt;
                              &lt;circle cx="28" cy="25" r="20" style="fill: rgb(122, 162, 92);"&gt;&lt;/circle&gt;
                              &lt;text dy="30" dx="24" style="fill: rgb(255, 255, 255);"&gt;G&lt;/text&gt;
                          &lt;/g&gt;
                      &lt;/svg&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr class="tableRowStyle"&gt;
                  &lt;td class="tableCellStyle"&gt;Title 2&lt;/td&gt;
                  &lt;td class="tableCellStyle"&gt;00002&lt;/td&gt;
                  &lt;td class="tableCellStyle"&gt;Elsa&lt;/td&gt;
                  &lt;td class="tableCellStyle"&gt;
                      &lt;svg width="50" height="50"&gt;
                          &lt;g&gt;
                              &lt;circle cx="28" cy="25" r="20" style="fill: rgb(122, 162, 92);"&gt;&lt;/circle&gt;
                              &lt;text dy="30" dx="24" style="fill: rgb(255, 255, 255);"&gt;G&lt;/text&gt;
                          &lt;/g&gt;
                      &lt;/svg&gt;
                  &lt;/td&gt;
                  &lt;td class="tableCellStyle"&gt;
                      &lt;svg width="50" height="50"&gt;
                          &lt;g&gt;
                              &lt;circle cx="28" cy="25" r="20" style="fill: rgb(216, 75, 42);"&gt;&lt;/circle&gt;
                              &lt;text dy="30" dx="24" style="fill: rgb(255, 255, 255);"&gt;R&lt;/text&gt;
                          &lt;/g&gt;
                      &lt;/svg&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's what I have so far:
  <div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function evalColor(d) {
      if (d == "Green" | d == "Yellow" | d == "Red") {
          return createSVG(d);
      }
      if (d != "Green" | d != "Yellow" | d != "Red") {
          return d;
      }
  }
  
  function evalText(d) {
      if (d == "Green" | d == "Yellow" | d == "Red") {
          console.log(d);
      }
      else if (d != "Green" | d != "Yellow" | d != "Red") {
          return d;
      }
  }
  
  function createTable() {
      var dataSet = [{
          "Title": "Title 1",
          "ID": "00001",
          "Name": "Rena",
          "Color 1": "Yellow",
          "Color 2": "Green"
      }, {
          "Title": "Title 2",
          "ID": "00002",
          "Name": "Elsa",
          "Color 1": "Green",
          "Color 2": "Red"
      }, ];
  
      var div = d3.select('.tables');
  
      // append a table to the div
      var table = div.append("table")
          .attr({
              id: "sample",
              class: 'table'
          })
          .classed("display", true);
  
      // append a header to the table
      var thead = table.append("thead")
          .attr({
              class: 'headerStyle'
          });
  
      // append a body to the table
      var tbody = table.append("tbody")
          .attr({
              class: 'tableBodyStyle'
          });
  
      // append a row to the header
      var theadRow = thead.append("tr")
          .attr({
              class: 'headerRowStyle'
          });
  
      // return a selection of cell elements in the header row
      // attribute (join) data to the selection
      // update (enter) the selection with nodes that have data
      // append the cell elements to the header row
      // return the text string for each item in the data array
      theadRow.selectAll("th")
          .data(d3.keys(dataSet[0]))
          .enter()
          .append("th")
          .text(function(d) {
              return d;
          });
  
      // table body rows
      var tableBodyRows = tbody.selectAll("tr")
          .data(dataSet)
          .enter()
          .append("tr")
          .attr({
              class: 'tableRowStyle'
          });
  
      //table body row cells
      tableBodyRows.selectAll("td")
          .data(function(d) {
              return d3.values(d);
          })
          .enter()
          .append("td")
          .append(function(d) {
              return createSVG(d);
          })
          .text(function(d) {
              return evalText(d);
          });
  }
  
  function createSVG(d) {
  
      function colorPicker(value) {
          if (value == "Green") {
              return "#7aa25c";
          }
          else if (value == "Yellow") {
              return "#f4f85e";
          }
          else if (value == "Red") {
              return "#d84b2a";
          }
      }
  
      function colorFill(value) {
          if (value == "Green") {
              return "#fff";
          }
          else if (value == "Yellow") {
              return "#565656";
          }
          else if (value == "Red") {
              return "#fff";
          }
      }
  
      function letterChoice(value) {
          if (value == "Green") {
              return "G";
          }
          else if (value == "Yellow") {
              return "Y";
          }
          else if (value == "Red") {
              return "R";
          }
      }
  
      var w = 50;
      var h = 50;
  
      var kpi = document.createElement("div");
  
      var svg = d3.select(kpi).append("svg")
          .attr({
              width: w,
              height: h
          });
  
  
      var elem = svg.selectAll("div")
          .data([d]);
  
      var elemEnter = elem.enter()
          .append("g");
  
      elemEnter.append("circle")
          .attr({
              cx: 28,
              cy: 25,
              r: 20
          })
          .style("fill", function(d) {
              return colorPicker(d);
          });
  
      elemEnter.append("text")
          .style("fill", function(d) {
              return colorFill(d);
          })
          .attr("dy", 55)
          .attr("dx", 45)
          .text(function(d) {
              return letterChoice(d);
          });
  
      return kpi;
  }
  
  createTable();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>        .canvasBackground {
              background-color: white
          }
          
          .table {
              border-collapse: collapse;
              border: #d0d4d5 solid 1px;
              border-spacing: 0px;
              font: normal 11px Georgia, 'Times New Roman', Times, serif;
              letter-spacing: 1px;
              line-height: 14px;
              padding: 5px;
              width: 100%
          }
          
          .headerStyle {
              vertical-align: middle;
          }
          
          .headerRowStyle {
              background-color: #fff;
              border-bottom: 3px solid #ccc;
              color: #4078a9;
              font-size: 14px;
              height: 48px;
              line-height: 14px;
              padding: 10px 5px 5px 5px
          }
          
          .headerCellStyle {
              border-left: 1px solid #d0d4d5;
  
          }
  
          .tableBodyStyle {
              text-align: left;
              vertical-align: middle
          }
          
          .tableRowStyle {
              background-color: #fff;
              border-bottom: 1px solid #d0d4d5;
              color: #565656;
              padding: 5px 5px
          }
          
          .tableCellStyle {
              border: 1px solid #d0d4d5;
              
          }        
         </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"&gt;&lt;/script&gt;
  &lt;body&gt;
      &lt;div class="canvasBackground"&gt;
   &lt;div class="tables"&gt;&lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Essentially, I'd like to use <code>.append</code> method to append <code>&lt;td&gt;</code> elements with text if the text does not include a color, like 'Red', 'Yellow', or 'Green. If the text does include those colors, I want to use that same <code>.append</code> method to append a child svg cirlce element. But when I use the <code>.text</code> method, my svg elements go away.</p>
  
  <p>Any ideas?</p>