打包圖僅表示資料間包含關係，打包圖如下示例：

  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)));
            

        });