D3官网上的力导图

D3 官网上的力导图整理

 

其代码：

/* 
 * @Author: Administrator
 * @Date:   2015-11-18 15:45:55
 * @Last Modified by:   Administrator
 * @Last Modified time: 2015-11-27 11:49:48
 */

'use strict';

var forceTree = function(setting) {

    d3.select(setting.selector).selectAll('svg').remove()
    var selector = setting.selector,
        tempSeries = setting.series,
        series = setting.series,
        w = document.querySelector(selector).getBoundingClientRect().width * 0.9,
        h = document.querySelector(selector).getBoundingClientRect().height * 0.9,
        node,
        link,
        root
     
    var force = d3.layout.force()
        .on("tick", tick)
        .charge(function(d) {

            return d.children ? -d.size / 100 : -300;
        })
        /*  .linkDistance(function(d) {
     
             return d.children ? 1000 : 30;
         })*/
        .size([w, h - 320])

    var vis = d3.select(selector).append("svg:svg")
        .attr("width", w)
        .attr("height", h)

    // start it 

    root = series

    startRoot(root)

    function startRoot(root) {

        root.fixed = true
        root.x = w / 2
        root.y = h / 2 + 100
        update()

    }

    function update() {

        d3.selectAll('line').remove()
        d3.selectAll('circle').remove()

        var nodes = flatten(root),
            links = d3.layout.tree().links(nodes)

        // Restart the force layout.
        force
            .nodes(nodes)
            .links(links)
            .start()

        // Update the links…
        link = vis.selectAll("line.link")
            .data(links, function(d) {
                return d.target.id
            })

        // Enter any new links.
        link.enter().insert("svg:line", ".node")
            .attr("class", "link")
            .attr("x1", function(d) {
                return d.source.x
            })
            .attr('stroke','#fff')
            .attr("y1", function(d) {
                return d.source.y
            })
            .attr("x2", function(d) {
                return d.target.x
            })
            .attr("y2", function(d) {
                return d.target.y
            })

        // Exit any old links.
        link.exit().remove();

        // Update the nodes…
        node = vis.selectAll("circle.node")
            .data(nodes, function(d) {
                return d.id
            })
            .style("fill", 'green');

        node.transition()
            .attr("r", function(d) {

                return 10
            })

        // Enter any new nodes.
        node.enter().append("svg:circle")
            .attr("class", "node")
            .attr("cx", function(d) {
                return d.x
            })
            .attr("cy", function(d) {
                return d.y
            })
            .attr("r", function(d) {

                if (d.type === 'project') {

                    return 15
                } else if (d.type === 'company') {
                    return 10
                } else {
                    return 5
                }
            })
            .style("fill", function(d, i) {

                if (d.type === 'project') {

                    return 'red'
                } else if (d.type === 'company') {
                    return 'green'
                } else {
                    return 'pink'
                }

            })
            .attr('class', function(d, i) {

                $(this).data('info', d)
                return 'circle #circle' + d.index
            })
            .on("click.first", click)
            .on('click.second', createChild)
            .call(force.drag)

        node.exit().remove()
    }

    function tick() {
        link.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;
            });

        node.attr("cx", function(d) {
                return d.x;
            })
            .attr("cy", function(d) {
                return d.y;
            });
    }


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

    function flatten(root) {

        var nodes = [],
            i = 0;

        function recurse(node) {

            if (node.children) node.size = node.children.reduce(function(p, v) {
                return p + recurse(v);
            }, 0);

            if (!node.id) node.id = ++i;
            nodes.push(node);
            return node.size;
        }

        root.size = recurse(root);
        return nodes;
    }

    function createChild(d) {

      /*  $.ajax({
            url: 'data/flare2.json',
            type: 'GET',
            dataType: 'json',
            success: function(data) {

            }
        })*/
    }
    // end createChild
}