Tsung-Che Hsieh ChungChe

## README.md

      
              5 files
            
          
              92 forks
            
          
                44 comments
              
            
              163 stars
            
          
                robschmuecker
                / README.md
            
            
              Last active
              March 28, 2025 14:54
            
              
                D3.js Drag and Drop, Zoomable, Panning, Collapsible Tree with auto-sizing.
              
          
    This example pulls together various examples of work with trees in D3.js.
The panning functionality can certainly be improved in my opinion and I would be thrilled to see better solutions contributed.
One can do all manner of housekeeping or server related calls on the drop event to manage a remote tree dataset for example.
Dragging can be performed on any node other than root (flare).
Dropping can be done on any node.
Panning can either be done by dragging an empty part of the SVG around or dragging a node towards an edge.

  
## .block
license: gpl-3.0

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>One Graph</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js"></script>
    <script type="text/javascript" src="simple-graph.js"></script>
    <style type="text/css">
      body { font: 13px sans-serif; }
      rect { fill: #fff; }

## .block
license: gpl-3.0
redirect: https://observablehq.com/@d3/force-directed-tree
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>One Graph</title>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js"></script>
	<script type="text/javascript" src="simple-graph.js"></script>
	<style type="text/css">
	body { font: 13px sans-serif; }
	rect { fill: #fff; }
	license: gpl-3.0
	redirect: https://observablehq.com/@d3/force-directed-tree