D3 Examples - Svg Enter and Append

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg {
      width: 100%;
      height: 100%;
    }
    .bar {
      height: 30px;
      color: green;
      fill: lightgreen;
      stroke: black;
      stroke-width: 1;
    }
    .rect-container {
      background: lightgray;
      border: 1px solid black;
      min-width: 200px;
      min-height: 350px;
    }
    .fill {
      fill: red;
    }
    .fill:hover {
      opacity: 0.35
    }
  </style>
</head>
​
<body>
  <div class="rect-container"></div>
  <script>
    var data = [
      { name: 'Mahoney', score: 97 },
      { name: 'Billy', score: 83 },
      { name: 'Donald', score: 78 },
      { name: 'David', score: 99 },
      { name: 'Gabriella', score: 100 }
    ];
    
    var bar = d3.select('.rect-container')
        .append('svg')
            .attr('width', 760)
            .attr('height', 900)
        .selectAll('g')
        .data(data)
        .enter()
            .append('g')
            .attr('transform', function(d, i) {
          return 'translate(0,' + i * 50 + ')';
        })
    
        bar.append('rect')
        .attr('width', function(d) {
        return d.score;
        })
        .attr('class', 'bar')
        .on('mouseover', function(d, i, rectElement) {
        d3.selectAll(rectElement)
            .filter(':not(:hover)')
            .classed('fill', true)
        })
      .on('mouseout', function(d, i, rectElement) {
        d3.selectAll(rectElement)
          .classed('fill', false)
        })
    
    bar.append('text')
        .attr('y', 20)
        .text(function(d) {
        return d.name
        });
  </script>
</body>
​
    