Old school D3 from simpler times

All examples By author By category About

localpcguy

Full window Github gist

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

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

From D3 in Depth book by Peter Cook.

forked from d3indepth's block: Add elements using .enter and .append (starting with empty selection).

<!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>

https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js