用D3.js绘制的D3.js学习树

D3 Tree Example

d3, tree, map

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1564
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

$.get('/uploads/1811/realOntology.json').done(function(data) {
    //jsonToD3(data);
});

var data = {
    "name": "如何学习D3",
    "children": [{
            "name": "预备知识",
            "children": [{
                "name": "HTML & CSS"
            }, {
                "name": "JavaScript"
            }, {
                "name": "DOM"
            }, {
                "name": "SVG"
            }]
        },

{
            "name": "安装",
            "children": [{
                "name": "记事本软件",
                "children": [{
                    "name": "Notepad++"
                }, {
                    "name": "EditPlus"
                }, {
                    "name": "Sublime Text"
                }]
            }, {
                "name": "服务器软件",
                "children": [{
                    "name": "Apache Http Server"
                }, {
                    "name": "Tomcat"
                }]
            }, {
                "name": "下载D3.js"
            }]
        },

{
            "name": "入门",
            "children": [{
                "name": "选择集",
                "children": [{
                    "name": "select"
                }, {
                    "name": "selectAll"
                }]
            }, {
                "name": "绑定数据",
                "children": [{
                    "name": "datum"
                }, {
                    "name": "data"
                }]
            }, {
                "name": "添加删除元素"
            }, {
                "name": "简单图形",
                "children": [{
                    "name": "柱形图"
                }, {
                    "name": "折线图"
                }, {
                    "name": "散点图"
                }]
            }, {
                "name": "比例尺"
            }, {
                "name": "生成器"
            }, {
                "name": "过渡"
            }]
        },

{
            "name": "进阶",
            "children": [{
                "name": "布局的应用",
                "children": [{
                    "name": "饼状图"
                }, {
                    "name": "树状图"
                }, {
                    "name": "矩阵树图"
                }]
            }, {
                "name": "地图"
            }]
        }
    ]
}

jsonToD3(data);

// Helper functions
function jsonToD3(data) {
    // taken from:
    // http://bl.ocks.org/mbostock/4063582
    // http://bl.ocks.org/mbostock/4339083
    var container = document.getElementById('d3Frame');
    while (container.firstChild) {
        container.removeChild(container.firstChild);
    }
    var margin = {
        top: 5,
        right: 120,
        bottom: 5,
        left: 120
    };
    var width = 960 - margin.right - margin.left;
    var height = 500 - margin.top - margin.bottom;
    var i = 0,
        duration = 500;
    var root = data;
    var tree = d3.layout.tree().size([height, width]);
    var diagonal = d3.svg.diagonal().projection(function(d) {
        return [d.y, d.x];
    });
    var svg = d3.select("#d3Frame").append("svg")
        .attr("width", '100%').attr("height", height + margin.top + margin.bottom).append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    root.x0 = height / 2;
    root.y0 = 0;

function collapse(d) {
        if (d.children) {
            d._children = d.children;
            d._children.forEach(collapse);
            d.children = null;
        }
    }

root.children.forEach(collapse);
    update(root);
    d3.select('#d3Frame').style("height", "500px");

function update(source) {
        // Compute the new tree layout.
        var nodes = tree.nodes(root).reverse(),
            links = tree.links(nodes);

// Normalize for fixed-depth.
        nodes.forEach(function(d) {
            d.y = d.depth * 180;
        });

// Update the nodes…
        var node = svg.selectAll("g.node").data(nodes, function(d) {
            return d.id || (d.id = ++i);
        });

// Enter any new nodes at the parent's previous position.
        var nodeEnter = node.enter().append("g").attr("class", "node").attr("transform", function(d) {
            return "translate(" + source.y0 + "," + source.x0 + ")";
        }).on("click", click);
        nodeEnter.append("circle").attr("r", 1e-6).style("fill", function(d) {
            return d._children ? "lightsteelblue" : "#fff";
        });
        nodeEnter.append("text").attr("x", function(d) {
            return d.children || d._children ? -10 : 10;
        }).attr("dy", ".35em").attr("text-anchor", function(d) {
            return d.children || d._children ? "end" : "start";
        }).text(function(d) {
            return d.name;
        }).style("fill-opacity", 1e-6);

// Transition nodes to their new position.
        var nodeUpdate = node.transition().duration(duration).attr("transform", function(d) {
            return "translate(" + d.y + "," + d.x + ")";
        });
        nodeUpdate.select("circle").attr("r", 4.5).style("fill", function(d) {
            return d._children ? "lightsteelblue" : "#fff";
        });
        nodeUpdate.select("text").style("fill-opacity", 1);

// Transition exiting nodes to the parent's new position.
        var nodeExit = node.exit().transition().duration(duration).attr("transform", function(d) {
            return "translate(" + source.y + "," + source.x + ")";
        }).remove();
        nodeExit.select("circle").attr("r", 1e-6);
        nodeExit.select("text").style("fill-opacity", 1e-6);

// Update the links…
        var link = svg.selectAll("path.link").data(links, function(d) {
            return d.target.id;
        });

// Enter any new links at the parent's previous position.
        link.enter().insert("path", "g").attr("class", "link").attr("d", function(d) {
            var o = {
                x: source.x0,
                y: source.y0
            };
            return diagonal({
                source: o,
                target: o
            });
        });

// Transition links to their new position.
        link.transition().duration(duration).attr("d", diagonal);

// Transition exiting nodes to the parent's new position.
        link.exit().transition().duration(duration).attr("d", function(d) {
            var o = {
                x: source.x,
                y: source.y
            };
            return diagonal({
                source: o,
                target: o
            });
        }).remove();

// Stash the old positions for transition.
        nodes.forEach(function(d) {
            d.x0 = d.x;
            d.y0 = d.y;
        });
    }

// Toggle children on click.
    function click(d) {
        if (d.children) {
            d._children = d.children;
            d.children = null;
        } else {
            d.children = d._children;
            d._children = null;
        }
        update(d);
    }
}

function exportTreeToJSON(tree) {
    this._tree = tree;
    var manager = this;
    var json = '';
    renderBranch(null);
    json = '[' + json.substring(0, json.length - 1).replace(/\}\,\]/g, '}]');
    json += (json.slice(-1) === "]") ? '}]' : ']';

function findObjectByKey(array, key, value) {
    for (var i = 0; i < array.length; i++) {
        if (array[i][key] === value) {
            return array[i];
        }
    }
    return null;
}

编译

CSS

HTML

D3 Tree Example

d3, tree, map

编辑器支持Emmet

快捷键

D3 Tree Example

d3, tree, map

使用D3.js绘制的Python2014大会主题旭日图

使用D3.js绘制类似MindManager或XMind软件所绘制的脑图

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：