d3.js学习笔记 （五） （打包图与冒泡图）

打包图仅表示数据间包含关系，打包图如下示例：

  var width = 500;
        var height = 500;

//================设置打包图布局=======================
        var pack = d3.layout.pack()
            .size([width, height])
            .radius(20);

        if (svg == undefined)
        {
            svg = d3.select("body").append("svg")
                .attr("width", width)
                .attr("height", height)
                .append("g")
                .attr("transform", "translate(0,0)");
        }

        //==================读取json数据并反序列化为对象===========================
        d3.json("../data/city.json", function (error, root) {

            //====================创建打包图的所有节点（节点包含了节点名称，节点间父子关系、节点的坐标位置等信息）==============================
            var nodes = pack.nodes(root);
            //====================创建节点关系================================
            var links = pack.links(nodes);

            console.log(nodes);
            console.log(links);

            svg.selectAll("circle")
                .data(nodes)
                .enter()
                .append("circle")
                .attr("fill", "rgb(31, 119, 180)")
                .attr("fill-opacity", "0.4")
                .attr("cx", function (d) {
                    return d.x;
                })
                .attr("cy", function (d) {
                    return d.y;
                })
                .attr("r", function (d) {
                    return d.r;
                })
                .on("mouseover", function (d, i) {
                    d3.select(this)
                        .attr("fill", "yellow");
                })
                .on("mouseout", function (d, i) {
                    d3.select(this)
                        .attr("fill", "rgb(31, 119, 180)");
                });

//===========对应数据添加并显示元素==========================
            svg.selectAll("text")
                .data(nodes)
                .enter()
                .append("text")
                .attr("font-size", "10px")
                .attr("fill", "white")
                .attr("fill-opacity", function (d) {
                    if (d.depth == 2)
                        return "0.9";
                    else
                        return "0";
                })
                .attr("x", function (d) { return d.x; })
                .attr("y", function (d) { return d.y; })
                .attr("dx", -12)
                .attr("dy", 1)
                .text(function (d) { return d.name; })
//==============响应鼠标事件显示当前元素======================
                .on("mouseover", function (d, i) {
                 d3.select(this)
                    .attr("fill", "yellow");
                 })
                .on("mouseout", function (d, i) {
                    d3.select(this)
                        .attr("fill", "white");
                });

        });

冒泡图是一类特殊的打包图，既：层次为一级，无子节点的特殊打包图，冒泡图示例如下：

        var width = 800;
        var height = 800;
        var radius = 20;

        if (svg == undefined) {
            svg = d3.select("body").append("svg")
                .attr("width", width)
                .attr("height", height);
                //.append("g")
                //.attr("transform", "translate(0,0)");
        }

        var pack = d3.layout.pack()
            .size([width, height])
            .radius(20)
            .value(function (d) {
                return 20;
            })
            .sort(null);


        //==================读取json数据并反序列化为对象===========================
        d3.json("../data/city.json", function (error, root) {

//=================定义拖拽响应函数======================
            function dragmove(d) {
                d3.select(this)
                    .attr("transform", function () {
                        x = Math.max(radius, Math.min(width - radius, d3.event.x));
                        y = Math.max(radius, Math.min(height - radius, d3.event.y));
                        x = x - this.getBBox().x;
                        y = y - this.getBBox().y;
                        return "translate(" + x + "," + y + ")";
                    });
            }

//============创建节点===================
            var nodes = pack.nodes(root);
            console.log(nodes);

            var color = d3.scale.category20c();

            //.attr("class", "bubble");
//===============声明拖拽行为,并建立拖拽事件及其事件响应函数间联系=========================
            var drag = d3.behavior.drag()
                //.origin(function (d) { return d; })   //如果在拖动相应事件中需要使用节点数据，需要设置该属性
                .on("drag", dragmove);



            var bubbles = svg.selectAll(".bubble")
                .data(nodes.filter(function (d) {
                    return !d.children;
                }))
                .enter()
                .append("g");
            

            console.log(bubbles);


             bubbles.append("circle")
                    .style("fill", function (d, i) {
                        return color(i);
                    })
                    .attr("cx", function (d) { return d.x; })
                    .attr("cy", function (d) { return d.y; })
                    .attr("r", function (d) { return d.r; })
                    .attr("fill-opacity", "0.8");
                

            bubbles.append("text")
                .attr("x", function (d) { return d.x; })
                .attr("y", function (d) { return d.y; })
                .attr("font-size", "9px")
                .attr("text-anchor", "middle")
                .text(function (d) {
                    return d.name;
                })  ;

//==============为冒泡节点实现拖拽=====================
            bubbles.call(drag);

 
                    //.attr("transform","trans" d.x = Math.max(radius, Math.min(width - radius, d3.event.x)))
                    //.attr("y", d.y = Math.max(radius, Math.min(height - radius, d3.event.y)));
            

        });