d3noob/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    This is a simple vertical tree diagram written with d3.js v5.
This is designed to be used as a starting point for further development as part of documenting an update to the book D3 Tips and Tricks to version 5 of d3.js.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 3px;
}

.node text { font: 12px sans-serif; }

.node--internal text {
  text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 2px;
}

</style>

<body>

<!-- load the d3.js library -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>

var treeData =
  {
    "name": "Top Level",
    "children": [
      {
		"name": "Level 2: A",
        "children": [
          { "name": "Son of A" },
          { "name": "Daughter of A" }
        ]
      },
      { "name": "Level 2: B" }
    ]
  };

// set the dimensions and margins of the diagram
var margin = {top: 40, right: 90, bottom: 50, left: 90},
    width = 660 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// declares a tree layout and assigns the size
var treemap = d3.tree()
    .size([width, height]);

//  assigns the data to a hierarchy using parent-child relationships
var nodes = d3.hierarchy(treeData);

// maps the node data to the tree layout
nodes = treemap(nodes);

// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom),
    g = svg.append("g")
      .attr("transform",
            "translate(" + margin.left + "," + margin.top + ")");

// adds the links between the nodes
var link = g.selectAll(".link")
    .data( nodes.descendants().slice(1))
  .enter().append("path")
    .attr("class", "link")
    .attr("d", function(d) {
       return "M" + d.x + "," + d.y
         + "C" + d.x + "," + (d.y + d.parent.y) / 2
         + " " + d.parent.x + "," +  (d.y + d.parent.y) / 2
         + " " + d.parent.x + "," + d.parent.y;
       });

// adds each node as a group
var node = g.selectAll(".node")
    .data(nodes.descendants())
  .enter().append("g")
    .attr("class", function(d) {
      return "node" +
        (d.children ? " node--internal" : " node--leaf"); })
    .attr("transform", function(d) {
      return "translate(" + d.x + "," + d.y + ")"; });

// adds the circle to the node
node.append("circle")
  .attr("r", 10);

// adds the text to the node
node.append("text")
  .attr("dy", ".35em")
  .attr("y", function(d) { return d.children ? -20 : 20; })
  .style("text-anchor", "middle")
  .text(function(d) { return d.data.name; });

</script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style> /* set the CSS */

	.node circle {
	fill: #fff;
	stroke: steelblue;
	stroke-width: 3px;
	}

	.node text { font: 12px sans-serif; }

	.node--internal text {
	text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
	}

	.link {
	fill: none;
	stroke: #ccc;
	stroke-width: 2px;
	}

	</style>

	<body>

	<!-- load the d3.js library -->
	<script src="https://d3js.org/d3.v5.min.js"></script>
	<script>

	var treeData =
	{
	"name": "Top Level",
	"children": [
	{
	"name": "Level 2: A",
	"children": [
	{ "name": "Son of A" },
	{ "name": "Daughter of A" }
	]
	},
	{ "name": "Level 2: B" }
	]
	};

	// set the dimensions and margins of the diagram
	var margin = {top: 40, right: 90, bottom: 50, left: 90},
	width = 660 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	// declares a tree layout and assigns the size
	var treemap = d3.tree()
	.size([width, height]);

	// assigns the data to a hierarchy using parent-child relationships
	var nodes = d3.hierarchy(treeData);

	// maps the node data to the tree layout
	nodes = treemap(nodes);

	// append the svg obgect to the body of the page
	// appends a 'group' element to 'svg'
	// moves the 'group' element to the top left margin
	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom),
	g = svg.append("g")
	.attr("transform",
	"translate(" + margin.left + "," + margin.top + ")");

	// adds the links between the nodes
	var link = g.selectAll(".link")
	.data( nodes.descendants().slice(1))
	.enter().append("path")
	.attr("class", "link")
	.attr("d", function(d) {
	return "M" + d.x + "," + d.y
	+ "C" + d.x + "," + (d.y + d.parent.y) / 2
	+ " " + d.parent.x + "," + (d.y + d.parent.y) / 2
	+ " " + d.parent.x + "," + d.parent.y;
	});

	// adds each node as a group
	var node = g.selectAll(".node")
	.data(nodes.descendants())
	.enter().append("g")
	.attr("class", function(d) {
	return "node" +
	(d.children ? " node--internal" : " node--leaf"); })
	.attr("transform", function(d) {
	return "translate(" + d.x + "," + d.y + ")"; });

	// adds the circle to the node
	node.append("circle")
	.attr("r", 10);

	// adds the text to the node
	node.append("text")
	.attr("dy", ".35em")
	.attr("y", function(d) { return d.children ? -20 : 20; })
	.style("text-anchor", "middle")
	.text(function(d) { return d.data.name; });

	</script>
	</body>