Old school D3 from simpler times

All examples By author By category About

Igathi

Full window Github gist

Mouse click

Built with blockbuilder.org

<!DOCTYPE html>
<html>
<head>
    <meta name="description" content="D3byEX 8.3" />
    <meta charset="utf-8">
</head>

<body>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script>
 //       var svg = d3.select('body').append('svg')
 //                   .attr({ 'width': 600, 'height': 600 });

var width = 960,
    		height = 500,
    		active = d3.select(null);
      
      var data = [50, 40, 60];
      var x = 80;
        
			var zoomBehavior = d3.behavior.zoom()
    		.scaleExtent([0.1, 2])
    		.on('zoom', onZoom);
     
      var svg = d3.select('body')
        .append('svg')
        .attr({
            width: 600,
            height: 600
        })
    	.call(zoomBehavior)
    	.append('g');
      
         svg.selectAll('circle')
            .data(data)
            .enter()
            .append('circle')
            .attr('fill', 'steelblue')
            .each(function (d, i) {
                d3.select(this).attr({
                    cx: x += (d + 10),
                    cy: 150,
                    r: d / 2
                });
            })
            .on("click", clicked)
            .on('mouseenter', function () {
                d3.select(this).attr('fill', 'red');
            })
            .on('mouseout', function () {
                d3.select(this).attr('fill', 'steelblue');
            })
            .on('click', function () {
                d3.select(this).attr('fill', 'black');
            })
         ;
      
      function onZoom() {
        svg.attr('transform', 'translate(' +d3.event.translate + ')' +
            'scale(' + d3.event.scale + ')');
      }
      
      function clicked(d) {
  if (active.node() === this) return reset();
  active.classed("active", false);
  active = d3.select(this).classed("active", true);

var bounds = path.bounds(d),
      dx = bounds[1][0] - bounds[0][0],
      dy = bounds[1][1] - bounds[0][1],
      x = (bounds[0][0] + bounds[1][0]) / 2,
      y = (bounds[0][1] + bounds[1][1]) / 2,
  		dx = 100, dy = 100, x = 50, y = 50,
      scale = .9 / Math.max(dx / width, dy / height),
      translate = [width / 2 - scale * x, height / 2 - scale * y];

g.transition()
      .duration(750)
      .style("stroke-width", 1.5 / scale + "px")
      .attr("transform", "translate(" + translate + ")scale(" + scale + ")");
}

function reset() {
  active.classed("active", false);
  active = d3.select(null);

g.transition()
      .duration(750)
      .style("stroke-width", "1.5px")
      .attr("transform", "");
}     
    </script>
</body>
</html>

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