D3 Examples - safari select bug

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Safari Select bug</title>
    <style type="text/css">
    </style>
  </head>
  <body>
      <button id="select">Select</button>
      <button id="a">Select All</button>
<p> Select doesn't work in Safari because we have two different elements with the same id, even though we are selecting like "g#a". Select All works, and both work in Chrome/Firefox.</p>
      <svg id="svg"></svg>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.6.0/d3.js"></script>
    <script type="text/javascript">
​
var w = 960;
var h = 500;
​
var svg = d3.select("#svg");
var a = svg.append("svg:g")
    .attr("id", "a")
var b = a.append("svg:g")
    .attr("id", "b")
​
var select = d3.select("#select")
    .on("click", function(d,i) {
        ss = d3.select("#svg")
        aa = ss.select("g#a") 
        bb = aa.select("g#b")
​
        console.log("svg", ss, ss.node())
        console.log("aa", aa, aa.node(), "bb", bb, bb.node())
    })
​
var select = d3.select("button#a")
    .on("click", function(d,i) {
        ss = d3.select("#svg")
        aa = ss.selectAll("g#a") 
        bb = aa.select("g#b")
​
        console.log("svg", ss, ss.node())
        console.log("aa", aa, aa.node(), "bb", bb, bb.node())
    })
​
​
    </script>
  </body>
</html>
​
    