block by jonsadka baa854ad6a770a46b924

Layering svg Experiment

Full Screen

Exploration into a a possible svg layering issue in Chrome

index.html

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

data.json

{
  "data": [
  {
    "end": 151,
    "start": 0,
    "z": 1
  },
  {
    "end": 21,
    "start": 0,
    "z": 2
  },
  {
    "end": 147,
    "start": 21,
    "z": 2
  },
  {
    "end": 151,
    "start": 147,
    "z": 2
  },
  {
    "end": 29,
    "start": 21,
    "z": 3
  },
  {
    "end": 147,
    "start": 29,
    "z": 3
  },
  {
    "end": 42,
    "start": 29,
    "z": 4
  },
  {
    "end": 147,
    "start": 145,
    "z": 4
  },
  {
    "end": 145,
    "start": 42,
    "z": 4
  },
  {
    "end": 145,
    "start": 50,
    "z": 5
  },
  {
    "end": 50,
    "start": 42,
    "z": 5
  },
  {
    "end": 63,
    "start": 50,
    "z": 6
  },
  {
    "end": 143,
    "start": 63,
    "z": 6
  },
  {
    "end": 145,
    "start": 143,
    "z": 6
  },
  {
    "end": 71,
    "start": 63,
    "z": 7
  },
  {
    "end": 143,
    "start": 71,
    "z": 7
  },
  {
    "end": 141,
    "start": 84,
    "z": 8
  },
  {
    "end": 143,
    "start": 141,
    "z": 8
  },
  {
    "end": 84,
    "start": 71,
    "z": 8
  },
  {
    "end": 92,
    "start": 84,
    "z": 9
  },
  {
    "end": 141,
    "start": 92,
    "z": 9
  },
  {
    "end": 139,
    "start": 105,
    "z": 10
  },
  {
    "end": 105,
    "start": 92,
    "z": 10
  },
  {
    "end": 141,
    "start": 139,
    "z": 10
  },
  {
    "end": 113,
    "start": 105,
    "z": 11
  },
  {
    "end": 139,
    "start": 113,
    "z": 11
  },
  {
    "end": 137,
    "start": 126,
    "z": 12
  },
  {
    "end": 139,
    "start": 137,
    "z": 12
  },
  {
    "end": 126,
    "start": 113,
    "z": 12
  },
  {
    "end": 134,
    "start": 126,
    "z": 13
  },
  {
    "end": 137,
    "start": 134,
    "z": 13
  },
  {
    "end": 137,
    "start": 134,
    "z": 14
  }
  ]
}