d3实现了思维导图文件树效果-html代码-BFW代码库

d3实现了思维导图文件树效果

代码语言：html

所属分类：图表

代码描述：d3实现了思维导图文件树效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


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

<style>
.node {
    cursor: pointer;
}
.node circle {
    fill: #fff;
    stroke: steelblue;
    stroke-width: 1.5px;
}
.node text {
    font: 10px sans-serif;
}
.link {
    fill: none;
    stroke: #ccc;
    stroke-width: 1.5px;
}

body {
    overflow: hidden;
}
</style>

</head>
<body translate="no">
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/d3.v3.js"></script>
<div id="body"></div>

<script >
var margin = {
    top: 20,
    right: 120,
    bottom: 20,
    left: 120
},
width = 960 - margin.right - margin.left,
height = 800 - margin.top - margin.bottom;

var root = {
    "name": "flare",
        "children": [{
        "name": "analytics",
            "children": [{
            "name": "cluster",
                "children": [{
                "name": "AgglomerativeCluster",
                    "size": 3938
            }, {
                "name": "CommunityStructure",
                    "size": 3812
            }, {
                "name": "HierarchicalCluster",
                    "size": 6714
            }, {
                "name": "MergeEdge",
                    "size": 743
            }]
        }, {
            "name": "graph",
                "children": [{
                "name": "BetweennessCentrality",
                    "size": 3534
            }, {
                "name": "LinkDistance",
                    "size": 5731
            }, {
                "name": "MaxFlowMinCut",
                    "size": 7840
            }, {
                "name": "ShortestPaths",
                    "size": 5914
            }, {
                "name": "SpanningTree",
                    "size": 3416
            }]
        }, {
            "name": "optimization",
                "children": [{
                "name": "AspectRatioBanker",
                    "size": 7074
            }]
        }]
    }, {
        "name": "animate",
            "children": [{
            "name": "Easing",
                "size": 17010
        }, {
            "name": "FunctionSequence",
                "size": 5842
        }, {
            "name": "interpolate",
                "children": [{
                "name": "ArrayInterpolator",
                    "size": 1983
            }, {
                "name": "ColorInterpolator",
                    "size": 2047
            }, {
                "name": "DateInterpolator",
                    "size": 1375
            }, {
                "name": "Interpolator",
                    "size": 8746
            }, {
                "name": "MatrixInterpolator",
                    "size": 2202
            }, {
                "name": "NumberInterpolator",
                    "size": 1382
            }, {
                "name": "ObjectInterpolator",
                    "size": 1629
            }, {
                "name": "PointInterpolator",
                    "size": 1675
            }, {
                "name": "RectangleInterpolator",
                    "size": 2042
            }]
        }, {
            "name": "ISchedulable",
                "size": 1041
        }, {
            "name": "Parallel",
                "size": 5176
        }, {
            "name": "Pause",
                "size": 449
        }, {
            "name": "Scheduler",
                "size": 5593
        }, {
            "name": "Sequence",
                "size": 5534
        }, {
            "name": "Transition",
                "size": 9201
        }, {
            "name": "Transitioner",
                "size": 19975
        }, {
            "name": "TransitionEvent",
                "size": 1116
        }, {
            "name": "Tween",
                "size": 6006
        }]
    }, {
        "name": "data",
            "children": [{
            "name": "converters",
                "children": [{
                "name": "Converters",
                    "size": 721
            }, {
                "name": "DelimitedTextConverter",
                    "size": 4294
            }, {
                "name": "GraphMLConverter",
                    "size": 9800
            }, {
                "name": "IDataConverter",
                    "size": 1314
            }, {
                "name": "JSONConverter",
                    "size": 2220
            }]
   .........完整代码请登录后点击上方下载按钮下载查看