D3学习笔记： Tree-Layout

弧线

图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <script src="https://cdn.bootcss.com/d3/3.5.17/d3.js"></script>
</head>
<body>
    <script>
        var canvas = d3.select("body").append("svg")
            .attr("width",500)
            .attr("height",500);

        var diagonal = d3.svg.diagonal()  //a path generator
            .source({x:10,y:10})
            .target({x:300,y:300});

        canvas.append("path")
              .attr("fill","none")
              .attr("stroke", "black")
              .attr("d",diagonal);

    </script>
</body>
</html>

tree-layout

在线查看

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <script src="https://d3js.org/d3.v4.min.js"></script>

    <style>
        html,body{
            margin: 0;padding: 0;
        }

        #chart{
            padding: 20px;
        }
    </style>
</head>
<body>

    <div id="chart"></div>
    <script>
        var data = {
  "name": "Eve",
  "children": [
    {
      "name": "Cain"
    },
    {
      "name": "Seth",
      "children": [
        {
          "name": "Enos"
        },
        {
          "name": "Noam"
        }
      ]
    },
    {
      "name": "Abel"
    },
    {
      "name": "Awan",
      "children": [
        {
          "name": "Enoch"
        }
      ]
    },
    {
      "name": "Azura"
    }
  ]
};

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

// append the svg object to the body of the page
var svg = d3.select('body').append('svg')
  .attr('width', w + margin.left + margin.right)
  .attr('height', h + margin.top + margin.bottom);

// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var g = svg.append('g')
    .attr('transform',
          'translate(' + margin.left + ',' + margin.top + ')');

// declares a tree layout and assigns the size
var tree = d3.tree()
  .size([w, h]);


// Assigns parent
var nodes = d3.hierarchy(data);
console.log(nodes)
 // Assigns the x and y position for the nodes
nodes = tree(nodes);

// adds the links between the nodes
var link = g.selectAll(".link")
    .data(nodes.descendants().slice(1))
    .enter()
    .append("path")
      .attr("class", "link")
      .attr("d", (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;
      })
      .attr('fill', 'none')
      .attr('stroke', '#ccc')
      .attr('stroke-width', 2);
console.log(link);

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


// adds the circle to the node
node.append('circle')
  .attr('r', 10)
  .attr('fill', 'steelblue');

// adds the text to the node
node.append("text")
  .attr("dy", 4)
  .attr("y", (d) => d.children ? -20 : 20 )
  .style("text-anchor", (d) =>  d.children ? "end" : "start" )
  .text((d) => d.data.name );


    </script>
</body>
</html>

注意 3.v3 和3.v4版本的变化

可收缩思维导图

【 D3.js 高级系列 — 10.0 】思维导图

在线效果

D3学习笔记： Tree-Layout

弧线

tree-layout

可收缩思维导图

白鲸鱼

引用和评论

git使用规范