title: D3.js v4: Zoom on Bubble chart
body: <p><a href="https://i.stack.imgur.com/E4GHX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/E4GHX.png" alt="enter image description here"></a></p>
  
  <p>I have this bubble chart and want to zoom in to be able to see the very small bubbles. I tried this <a href="https://bl.ocks.org/mbostock/4e3925cdc804db257a86fdef3a032a45" rel="nofollow noreferrer">code</a> by <em>Mike Bostock</em> but I have not succeeded getting good zooming functions, I think it because I have another chart concept.</p>
  
  <p>Other examples online apply zoom on charts that have axes but my chart has no axes. </p>
  
  <p>Here is my Code:</p>
  
  <pre><code>d3.json("Data/New/Treemap_source.json", function (error, data) {
          if (error) throw error;
  
          var diameter = 693;
          var color = d3.scaleOrdinal(d3.schemeCategory20);
          var format = function (d){ return "BTC " + d3.format(",.2f")(d); }
  
          var bubble = d3.pack(data)
              .size([diameter, diameter])
              .padding(1.5);
  
          var svg = d3.select("#bubblediv")
              .append("svg")
              .attr("width", diameter + margin.left + margin.right)
              .attr("height", diameter + margin.top + margin.bottom)
              .attr("class", "bubble");
  
  
          var nodes = d3.hierarchy(data)
              .sum(function(d) { return d.VolumeBTC; });
  
  
          var node = svg.selectAll(".node")
              .data(bubble(nodes).descendants())
              .enter()
              .filter(function(d){
                  return  !d.children
              })
              .append("g")
              .attr("class", "node")
              .attr("transform", function(d) {
                  return "translate(" + (d.x + margin.left)+ "," + (d.y + margin.top+20) + ")";
              });
  
              node.on("click", function (d) {
              alert("This bubble contains: " + d.data.Symbol);
              // var sel = d.data.Symbol;
              d3.select('#my-select').property('value', d.data.Symbol);
              // print_filter(d3.select('#my-select').property('value', d.data.Symbol));
              // d3.select('#my-select').property('value', d.data.Symbol);
          });
  
          node.append("title")
              .text(function(d) {
                  return d.data.Symbol + ": " + format(d.value);
              });
  
       d3.select("svg").append("text")
                          .attr("transform", "translate(" + (diameter / 2 -20) + " ,30)")
                          .attr('class','chartlabel')
                          .style("text-anchor", "middle")
                          .text("Altcoins Trading in BTC");
  
          node.append("circle")
              .attr("r", function(d) {
                  return d.r;
              })
              .style('stroke', '#263432')
              .style('stroke-width', '1.5')
              .style("fill", function(d,i) {
                  return color(i);
              });
  
          node.append("text")
              .attr("dy", ".2em")
              .style("text-anchor", "middle")
              .text(function(d) {
                  return d.data.Symbol.substring(0, d.r / 3);
              })
              .attr("font-family", "sans-serif")
              .attr("font-size", function(d){
                  return d.r/5;
              })
              .attr("fill", "white");
  
          node.append("text")
              .attr("dy", "1.3em")
              .style("text-anchor", "middle")
              .text(function(d) {
                  return format(d.data.VolumeBTC);
              })
              .attr("font-family",  "Gill Sans", "Gill Sans MT")
              .attr("font-size", function(d){
                  return d.r/6;
              })
              .attr("fill", "white");
  
          d3.select(self.frameElement)
              .style("height", diameter + "px");
  
      });
  </code></pre>