D3.js Error: Create Elements Without Appending

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.7/d3.min.js"></script>

JavaScript

// Example 1 works
d3.select("body")
	.append("svg")
  .attr("width", "100px")
  .attr("height", "100px")
		.append("rect")
    .attr("width", "100px")
    .attr("height", "100px")
    .attr("background", "black");

// Example 2 appears to be correct in the DOM but doesn't display
var svgTwo = document.createElement("svg");
d3.select(svgTwo)
  .attr("width", "100px")
  .attr("height", "100px")
    .append("rect")
    .attr("width", "100px")
    .attr("height", "100px")
    .attr("background", "black");
document.body.appendChild(svgTwo);

// Example 3 works
var svgThree = document.createElement("svg");
svgThree.style.width = "100px";
svgThree.style.height = "100px";
document.body.appendChild(svgThree);

var svgThreeRect = document.createElement("rect");
svgThreeRect.style.width = "100px";
svgThreeRect.style.height = "100px";
svgThreeRect.style.background = "black";
svgThree.appendChild(svgThreeRect);