Layering svg Experiment

Exploration into a a possible svg layering issue in Chrome

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
 
var width = 960,
    height = 500;
 
var svg = d3.select('body').append('svg')
            .attr('width',width)
            .attr('height',height);
 
d3.json("data.json", function(error, json) {
  if (error) return console.error(error);
 
    var maxNumber = json.data[0].end;
    var leftPadding = (width - height) / 2;
    var scale = d3.scale.linear()
                    .domain([0,maxNumber])
                    .range([0,height])
 
  svg.selectAll('circle').data(json.data)
    .enter().append('svg:circle')
    .attr('cx',function(d,i){
        return scale( (d.end-d.start)/2 + d.start ) + leftPadding ;
    })
    .attr('cy', height / 2)
    .attr('r',function(d,i){
        return scale( (d.end-d.start)/2 );
    })
    .style('opacity',0.4)
    .style('stroke','purple')
    .attr('fill','grey')
    .on('mouseenter',function(){
       d3.select(this).attr('fill','purple')
    })
    .on('mouseout',function(){
       d3.select(this).attr('fill','grey')
    }); 
 
});
 
</script>

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