Examples of d3 and SVG <foreignObject> that don't work right

<!DOCTYPE html>
<meta charset="utf-8">
<html>
  <head>
    <title>grids</title>
    <script src="https://d3js.org/d3.v3.min.js" type="text/javascript"></script>
    <style type="text/css">
      svg {border: 1px solid #d0d0d0;}
    </style>
  </head>
  <body>
 
 
<script type="text/javascript">
(function() {
  var div;

div = d3.select("body").append("div").style("width", "210px");

(function() {
    var svg = div.append("svg").attr("width", 200).attr("height", 90);
    svg.append("foreignObject")
      .attr("x", 5).attr("y", 0)
      .attr("width", 80).attr("height", 90)
      .append("xhtml:body").append("p").text("webkit leaves me on the left?");
    // the following select() works in firefox which correctly changes x
    // chrome and safari do not change x
    svg.select("foreignObject").attr("x", 120);
  })();

(function() {
    var svg = div.append("svg").attr("width", 200).attr("height", 50);
    // the following append() changes the DOM in chrome, safari, and firefox, looking at their inspectors
    // but none of them display this text
    svg.append("foreignobject")
      .attr("x", 50).attr("y", 5)
      .attr("width", 80).attr("height", 40)
      .append("xhtml:body").append("p").text("Why am I invisible?");
  })();

(function() {
    var svg = div.append("svg").attr("width", 200).attr("height", 510);
    svg.append("foreignObject")
      .attr("x", 50).attr("y", 0)
      .attr("width", 120).attr("height", 40)
      .append("xhtml:body").append("p").text("ooh! ooh! ooh! select me!");
    // none of firefox, chrome, nor safari change the text, so select() by lowercase doesn't work.
    svg.select("foreignobject").text("can't select by lowercase, either.");
  })();

}).call(this);

(function() {
  window.helloText = function() {
    return "Hello, World!";
  };

window.hello = function() {
    var html;
    html = JST["app/templates/hello.us"]({
      text: helloText()
    });
    return document.body.innerHTML += html;
  };

}).call(this);
</script>
  </body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js