D3 Examples - Add elements using .enter and .append (starting with empty selection).

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>Add elements using .enter and .append (starting with empty selection)</title>
</head>
​
<style>
  body {
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    color: #333;
  }
  #content rect {
    display: inline-block;
    margin: 10px;
    fill: limegreen;
    stroke: blue;
    width: 30px;
    height: 30px;
    text-align: center;
  }
</style>
​
<body>
    <svg id="content">
    <g></g>
    </svg>
​
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
  <script>
var myData = ['A', 'B', 'C', 'D', 'E'];
​
function doEnter() {
    d3.select('#content g')
      .selectAll('rect')
      .data(myData)
      .enter()
      .append('rect')
    .attr('x', d => myData.indexOf(d) * 40 + 'px');
  
  
    d3.select('#content g')
      .selectAll('svg')
      .data(myData)
      .enter()
    .filter(d => myData.indexOf(d) % 2)
    .append('svg')
    .attr('x', d => (myData.indexOf(d) * 40 + 7) + 'px')
    .attr('y', '7px')
    .attr('width', '30px')
    .attr('height', '30px')
    .attr('viewBox', '0 0 61.3 61')
    .attr('preserveAspectRatio', 'xMinYMin meet')
    .html(`<style type="text/css">
        .nn1{clip-path:url(#SVGID_2_);fill:#FFFFFF;}
        .nn2{clip-path:url(#SVGID_2_);fill:none;stroke:#DC4C26;stroke-width:4.88;stroke-miterlimit:10;}
        .nn3{clip-path:url(#SVGID_2_);fill:#DC4C26;}
      </style>
      <g>
        <defs>
          <rect id="SVGID_1_" y="0" width="61.3" height="61"></rect>
        </defs>
        <clipPath id="SVGID_2_">
          <use xlink:href="#SVGID_1_"  style="overflow:visible;"></use>
        </clipPath>
        <path class="nn1" d="M58.4,30.4c0,15.3-12.4,27.8-27.8,27.8c-15.3,0-27.8-12.4-27.8-27.8S15.3,2.7,30.6,2.7 C46,2.7,58.4,15.1,58.4,30.4"></path>
        <path class="nn2" d="M58.4,30.4c0,15.3-12.4,27.8-27.8,27.8c-15.3,0-27.8-12.4-27.8-27.8S15.3,2.7,30.6,2.7 C46,2.7,58.4,15.1,58.4,30.4z"></path>
        <path class="nn3" d="M50.2,18.1L45.2,13c-0.6-0.6-1.6-0.6-2.2,0l-3,3c-0.1,0.1-0.1,0.1-0.1,0.2c-0.1,0.1-0.2,0.1-0.3,0.2 c-6.2,6.2-8.9,8.9-15.1,15.1c-0.3,0.3-0.5,0.6-0.6,1c-0.7,2.3-1.3,4.7-2,7c-0.2,0.5-0.2,1.1,0.3,1.5c0.4,0.4,0.9,0.4,1.5,0.3 c2.3-0.7,4.6-1.3,6.9-2c0.4-0.1,0.8-0.4,1.2-0.7c6.2-6.1,8.8-8.8,14.9-14.9c0.1-0.1,0.2-0.2,0.3-0.3c0.1-0.1,0.1-0.1,0.2-0.2l3-3 C50.8,19.7,50.8,18.7,50.2,18.1 M26.2,38l-0.9-0.9c0.3-1.1,0.6-2.2,0.9-3.2c1.1,1.1,2.1,2.1,3.2,3.2C28.4,37.3,27.3,37.6,26.2,38 M31.6,35.2c-1.1-1.1-2.3-2.3-3.5-3.5c4.1-4.1,8.3-8.3,12.5-12.5c1.1,1.2,2.3,2.3,3.5,3.5C39.9,26.8,35.7,31,31.6,35.2 M46,20.7 l-3.4-3.4l1.6-1.6l3.4,3.4L46,20.7z"></path>
        <polygon class="nn3" points="41.6,30.2 41.6,45 19.1,45 19.1,17.9 36.1,17.9 39,15.1 16.3,15.1 16.3,47.9 44.4,47.9 44.4,27.6  "></polygon>
      </g>`);
}
    doEnter();
  </script>
</body>
</html>
    