chapter6/6_16_zoom.html

<!doctype html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.8/d3.min.js" type="text/JavaScript"></script>
    <style>
    </style>
  </head>
  <body>
    <div id="viz">
      <svg style="width:600px;height:600px;" ></svg>
    </div>
    <script>
      d3.json("../data/tweets.json", viz);
      
      function viz(data) {
    	  
        var depthScale = d3.scaleOrdinal()
          .range(["#5EAFC6", "#FE9922", "#93c464", "#75739F"]);
        
        var nestedTweets = d3.nest()
          .key(d => d.user)
          .entries(data.tweets);
        
        var packableTweets = {id: "All Tweets", values: nestedTweets};
        
        var root = d3.hierarchy(packableTweets, d => d.values);
        
        var treeChart = d3.tree();
        treeChart.size([500,500]);
        
        var treeData = treeChart(root).descendants();
        
        d3.select("svg")
          .append("g")
            .attr("id", "treeG")
            .attr("transform", "translate(60,20)")
          .selectAll("g")
          .data(treeData)
          .enter()
          .append("g")
            .attr("class", "node")
            .attr("transform", d => `translate(${d.y},${d.x})`);
        
        d3.selectAll("g.node")
          .append("circle")
            .attr("r", 10)
          .style("fill", d => depthScale(d.depth))
          .style("stroke", "white")
          .style("stroke-width", "2px");
        
        d3.selectAll("g.node")
          .append("text")
            .style("text-anchor", "middle")
            .style("fill", "#4f442b")
            .text(d => d.data.id || d.data.key || d.data.content);
        
        d3.select("#treeG").selectAll("line")
          .data(treeData.filter(d => d.parent))
          .enter().insert("line","g")
            .attr("x1", d => d.parent.y)
            .attr("y1", d => d.parent.x)
            .attr("x2", d => d.y)
            .attr("y2", d => d.x)
            .style("stroke", "black");
        
        treeZoom = d3.zoom();
        treeZoom.on("zoom", zoomed);
        d3.select("svg").call(treeZoom);
        
        function zoomed() {
          console.log(d3.event);
          d3.select("#treeG").attr("transform",
            `translate(${d3.event.transform.x},${d3.event.transform.y})`);
        }
      }
    </script>
  </body>
</html>