d3.js bubbles with zoom & click to select

d3.js bubbles with zoom & click to select

by AleitaTrain

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
  <div id="chart"></div>

CSS

body{margin:0;font: 10px sans-serif;}
#chart,svg{width:560px;height:560px}

JavaScript

var r = 560;
  format = d3.format(",d");
  fill = d3.scale.category20c();

  var bubble = d3.layout.pack().sort(null).size([r,r]);

  var vis = d3.select("#chart").append("svg").attr("class", "bubble")
  .call(d3.behavior.zoom().on("zoom", redraw))
  .append("g").attr("class", "group2");

  d3.json("j.json", function() {
    var node = vis.selectAll("g.node")
    .data(bubble.nodes(flat).filter(function(d) {return !d.children;}))
    .enter().append("g")
    .attr("class", "node")
    .attr("transform", function(d) {return "translate(" + d.x + "," + d.y + ")";});

    node.append("title").text(function(d) {return d.className + ": " + format(d.value);});

    node.append("circle")
      .on("mousedown",clickOnCircleFunc).on("touchstart",clickOnCircleFunc)
    .attr("r", function(d) {return d.r;})
    .attr("class", "nodecircle")
    .style("fill", '#ff4719')
    .attr("data-classname", function(d) {return d.className;});

    node.append("text")
      .on("mousedown",clickOnCircleFunc).on("touchstart",clickOnCircleFunc)
    .attr("text-anchor", "middle")
    .attr("class", "nodetext")
    .attr("data-classname", function(d) {return d.className;})
    .attr("style", function(d) {var szd = d.r/5;return "font-size:" + szd+"px";})
    .attr("data-classname", function(d) {return d.className;})
    .each(function(d, i) {
      var nm = d.className;
      var arr = nm.replace(/[\(\)\\/,-]/g, " ").replace(/\s+/g, " ").split(" "),arrlength = (arr.length > 7) ? 8 : arr.length;
      d3.select(this).attr('y',"-" + (arrlength/2) + "em");
      //if text is over 7 words then ellipse the 8th
      for(var n = 0; n < arrlength; n++) {
        var tsp = d3.select(this).append('tspan').attr("x", "0").attr("dy", "1em").attr("data-classname", nm)
          .on("mousedown",clickOnCircleFunc).on("touchstart",clickOnCircleFunc);
        if(n === 7) {
          tsp.text("...");
        } else {
          tsp.text(arr[n]);
        }
      }
    });
  });

function clickOnCircleFunc(){
 ...