D3 Examples - on the display property

xxxxxxxxxx
 
<!DOCTYPE html>
  <meta charset="utf-8">
  <title>display property</title>
​
    <style>
html,body,div,table,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0}
table{border-collapse:collapse;border-spacing:0;}
body{background:white;}
​
.content{
  width:600px;
  margin:20px auto;
}
.outer-div{
  background:lightgray;
  position:relative;
  min-height:4ex;
  margin-top:20px;
}
.label{
  font-family: Consolas, sans-serif;
  color:black;
  background:lightgray;
  padding:0.5ex 0.5em;
  -webkit-border-bottom-left-radius:1ex;
  -moz-border-radius-bottomleft:1ex;
  border-bottom-left-radius:1ex;
  position:absolute;
  top:0;
  right:0;
}
.inner-div{
  background:black;
  margin:0px auto;
}
.inner-div-content{
  width:100px;
  height:100px;
  display:block;
}
    </style>
​
    <body>
      <div class="content"></div>
      <script src="//d3js.org/d3.v3.min.js"></script>
​
      <script>
​
var data = ('none inline block list-item inline-block inline-table ' +
            'table table-cell table-column table-column-group ' +
            'table-footer-group table-header-group table-row ' +
            'table-row-group flex inline-flex grid inline-grid ' +
            'run-in inherit').split(' '),
    outer = d3.select('.content')
                .selectAll('div')
                .data(data)
                .enter()
              .append('div')
                .classed('outer-div', true);
​
outer
  .append('div')
    .attr('class', 'label')
    .text(String);
​
outer
  .append('div')
    .attr('class', 'inner-div')
    .style('display', String)
  .append('svg')
    .attr({'class': 'inner-div-content',
           width: 100,
           height: 100})
  .append('g')
    .attr('transform', 'translate(1, 1)')
    .call(append_square, {xy: 0, hw: 98, s: {fill: 'orange'}})
    .call(append_square, {xy: 2, hw: 94, s: {fill: 'white'}});
​
d3.select(self.frameElement).style("height", "2216px");
​
function append_square(g, spec) {
  g.append('rect')
   .attr({x: spec.xy, y: spec.xy, width: spec.hw, height: spec.hw})
   .style(spec.s)
}
      </script>
​
    </body>
​
    