Hierarchy

hierarchy.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link href="../../css/common/bootstrap.min.css" rel="stylesheet" type="text/css" />

    <style>
        #buttons > div {
            /*text-align is used to center the div? That's outrageous.*/
            text-align: center;
        }

        #buttons {
            margin-top: 1rem;
            margin-bottom: 1rem;
            min-height: 4rem;
        }
    </style>
    <!--<link href="../../css/d3/d3Test15.css" rel="stylesheet" type="text/css" />-->
</head>
<body>

<div class="container">

    <div class="row">
        <svg style="width: 100%; height: 600px; border: 1px lightgray solid;"></svg>
    </div>

    <div class="row">
        <div class="alert alert-success" role="alert">
            <h4 class="alert-heading">Well done!</h4>
            <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
            <hr>
            <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
        </div>
    </div>

    <div class="row justify-content-sm-center align-items-end" id="buttons">
        <div class="col-sm">
            <button type="button" class="btn btn-primary" id="primary">Primary</button>
        </div>
        <div class="col-sm">
            <button type="button" class="btn btn-secondary" id="secondary">Secondary</button>
        </div>
        <div class="col-sm">
            <button type="button" class="btn btn-success">Success</button>
        </div>
        <div class="col-sm">
            <button type="button" class="btn btn-danger">Danger</button>
        </div>
        <div class="col-sm">
            <button type="button" class="btn btn-warning">Warning</button>
        </div>
        <div class="col-sm">
            <button type="button" class="btn btn-info">Info</button>
        </div>
        <div class="col-sm">
            <button type="button" class="btn btn-light">Light</button>
        </div>
        <div class="col-sm">
            <button type="button" class="btn btn-dark">Dark</button>
        </div>
        <div class="col-sm">
            <button type="button" class="btn btn-link">Link</button>
        </div>
    </div>

</div>

<script charset="UTF-8" src="../../js/common/jquery-3.3.1.min.js"></script>
<script charset="UTF-8" src="../../js/common/popper.min.js"></script>
<script charset="UTF-8" src="../../js/common/bootstrap.min.js"></script>
<!--https://d3js.org/d3.v4.min.js-->
<script charset="UTF-8" src="../../js/common/d3.v4.min.js"></script>
<!--http://d3js.org/colorbrewer.v1.min.js-->
<script charset="UTF-8" src="../../js/common/colorbrewer.v1.min.js"></script>
<!--https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.6/d3-legend.min.js-->
<script src="../../js/common/d3-legend.min.js"></script>
<!--<script src="../../js/common/d3.layout.cloud.min.js"></script>-->
<script src="../../js/common/d3.layout.cloud.min.js"></script>
<script charset="UTF-8" src="../../js/d3/hierarchy.js"></script>
</body>
</html>

goddess.csv:

name,city,sexDrive
Angelina Jolie,Los Angeles,70
Angelina Jolie,Malibu,30
Angelina Jolie,Malibu,40
Angelina Jolie,Malibu,50
Angelina Jolie,Malibu,80
Scarlett Johansson,Los Angeles,80
Gal Gadot,Jerusalem,95
Gal Gadot,San Francisco,23
Gal Gadot,West Covina,50
Emma Watson,London,70
Emma Watson,Paris,60
Kat Dennings,Pennsylvania,85
Emilia Clarke,London,45
Anne Hathaway,Brooklyn,35
Rachel McAdams,London,63

hierarchy.js:

$(function () {

    d3.csv("../../csv/d3/goddess.csv", goddessData => {

        //Hierarchical data (filter after filter, first group by name, then group by city)
        const nestedDataset = d3.nest()
            .key(d => d.name)
            .key(d => d.city)
            .entries(goddessData);

        console.log(nestedDataset);

        //Puts the array that d3.nest creates inside a "root" object that acts as the top-level parent
        const packableDataset = {"key": "All Goddesses", "values": nestedDataset};

        //Process the hierarchy with an accessor function for child elements to look for values, which matches the data created by d3.nest
        const root = d3.hierarchy(packableDataset, d => d.values)
            //Determine the size of leaf nodes
            .sum(d => parseInt(d["sexDrive"]));

        console.log("root", root);

        //Initialize the pack layout
        const packChart = d3.pack();
        //Sets the size of the circle-packing chart
        packChart.size([500, 500]);
        //Padding between different hierarchies.
        packChart.padding(10);

        const depthScale = d3.scaleOrdinal().range(colorbrewer.YlGn["4"]);

        //For every new values array, creates a circle enclosing all the other values array in it
        d3.select("svg")
            .append("g")
            .attr("transform", "translate(100, 20)")
            .selectAll("circle")
            //Processes the hierarchy with the pack layout and then flattens it using descendants to get a flattened array
            .data(packChart(root).descendants())
            .enter()
            .append("circle")
            //Radius and xy coordinates are all computed by the pack layout
            .attr("r", d => d.r)
            .attr("cx", d => d.x)
            .attr("cy", d => d.y)
            //The pack layout also gives each node a depth attribute that we can use to color them distinctly by depth
            .style("fill", d => depthScale(d.depth))
            .style("stroke", "black");

    });

    // d3.csv("../../csv/d3/stratify.csv", stratifyData => {
    //
    //     const stratifiedData = d3.stratify()
    //         .parentId(d => d.child)
    //         .id(d => d.parent);
    //
    //     console.log(stratifiedData);
    //
    // });

});

Effect:

猜你喜欢