Svg Enter Append Call

forked from jbelmont's block: Svg Enter and Append

<!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 }
    ];
    
    function setDimension(selection, key, val) {
      selection.attr(key, val);
    }
    
    var bar = d3.select('.rect-container')
    	.append('svg')
    		.call(setDimension, 'width', 760)
    		.call(setDimension, '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>

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