D3.js学习笔记【暂完，待续】

d3.select("#container")
.append('p')
.text("hello")
.style("color","red");

<svg width="100" height="100">
<circle r="50" cx="50" cy="50" stroke="yellow"
stroke-width="4"
fill="red"></circle>
</svg>

const canvas = d3.select("#container");
// add an svg

const svg = canvas.append("svg");
svg.attr("width", 100)
    .attr("height", 100);

const circle = svg.append("circle")
.attr("cx",50)
.attr("cy",50)
.attr("r",50)
.attr("fill","blue")

// circle
svg.append("circle")
.attr("cx",50)
.attr("cy",50)
.attr("r",50)
.attr("fill","blue")

// rect
svg.append("rect")
.attr("x",50)
.attr("rx",50)
.attr("y",10)
.attr("ry",10)
.attr("width",10)
.attr("height",100)
.attr("fill","red")

// line
svg.append("line")
.attr("x1","129")
.attr("x2","45")
.attr("y1","300")
.attr("y2","100")
.attr("stroke","gray")

// text
svg.append("text")
.attr("x",30)
.attr("y",100)
.attr("font-size",20)
.attr("file","gray")
.text("hello")

let dataArr = [4, 15, 34];
// add an svg element
const svg = canvas.append("svg");
svg.attr("width", 600)
.attr("height", 600);
const rect = svg.append("rect");
rect.attr("width", "24")
.data(dataArr)
.attr("height", "100")
.attr("fill", "gray")
.attr("x", function (d, i) { return d * 5; })
.attr("y", function (d, i) { return d * 10; })
// what are d and i, the d mean data, and the i mean index

let dataArr = [3, 10, 48, 31];
// add an svg element
const svg = canvas.append("svg")
    .attr("width", 600)
    .attr("height", 600);
const rect = svg.selectAll("rect");
// 这里必须是selectAll，不然会出错的。
rect.data(dataArr)
    .enter()
    .append("rect")
    .attr("fill", "orange")
    .attr("x", function (d, i) {
    console.log(d)
    return i * 25;
    })
    .attr("width", "20")
    .attr("y", function (d, i) {
    return 100 - (d * 3);
    })
    .attr("height", function (d, i) {
    return d * 3;
    })
console.log(rect)

let data = {
        "name": "A1",
        "children": [
            {
                "name": "B1",
                "children": [
                    {
                        "name": "C1",
                        "value": 100
                    },
                    {
                        "name": "C2",
                        "value": 300
                    },
                    {
                        "name": "C3",
                        "value": 200
                    }
                ]
            },
            {
                "name": "B2",
                "value": 200
            }
        ]
    };

<div id="content">
    <svg width="400" height="220">
        <g transform="translate(5, 5)">
            <g class="links"></g>
            <g class="nodes"></g>
        </g>
    </svg>
</div>

<script>

    let data = {
        "name": "A1",
        "children": [
            {
                "name": "B1",
                "children": [
                    {
                        "name": "C1",
                        "value": 100
                    },
                    {
                        "name": "C2",
                        "value": 300
                    },
                    {
                        "name": "C3",
                        "value": 200
                    }
                ]
            },
            {
                "name": "B2",
                "value": 200
            }
        ]
    };
    /* 数据是：A1 底下 有 B1 和 B2 ，B1 底下 有 C1 C2 C3*/
    let root = d3.hierarchy(data);
    console.log(root);
    let leaves = root.leaves();
    console.log(leaves);
    let links = root.links();
    console.log(links);
    let path = root.path(root.children[0].children[1]);
    console.log(path);
    let descendants = root.descendants();
    console.log("descendants: ", descendants);
    // 返回一个扁平的数组来表达root的子孙后代，而root.links()则返回一个扁平的对象数组来表达所有的父子links
    let treeLayout = d3.tree();
    // 使用size设置
    treeLayout.size([400, 200]);
    //随后我们可以调用treeLayout函数，传入我们的hierarchy object root:
    treeLayout(root);
    // 这个函数执行的结果是会将root的每一个node都增加上x和y的value

    // let svg = d3.select("#content")
    //     .append("svg")
    //     .attr("width", "100%")
    //     .attr("height", "100%");


    d3.select('svg g.nodes')
        .selectAll('circle.node')
        .data(root.descendants())
        .enter()
        .append('circle')
        .classed('node', true)
        .attr('cx', function (d) {
            return d.x;
        })
        .attr('cy', function (d) {
            return d.y;
        })
        .attr('r', 4);

    // Links
    d3.select('svg g.links')
        .selectAll('line.link')
        .data(root.links())
        .enter()
        .append('line')
        .classed('link', true)
        .attr('x1', function (d) {
            return d.source.x;
        })
        .attr('y1', function (d) {
            return d.source.y;
        })
        .attr('x2', function (d) {
            return d.target.x;
        })
        .attr('y2', function (d) {
            return d.target.y;
        });


</script>

var myScale = d3.scaleLinear()
  .domain([0, 10])
  .range([0, 600]);