d3チャートを正しくズームする方法は？

d3ワードクラウドレイアウトでチャートを作成しました。d3.zoom（）を使用してズームしたい。問題は、ズーム機能を実装すると、SVGが範囲外になることです。この例のように：https：//codepen.io/bitbyte/pen/oVKGjx

var words = ["two", "two", "seven", "seven", "seven", "seven", "seven", "seven", "seven", "three", "three", "three", "eight", "eight", "eight", "eight", "eight", "eight", "eight", "eight", "five", "five", "five", "five", "five", "four", "four", "four", "four", "nine", "nine", "nine", "nine", "nine", "nine", "nine", "nine", "nine", "one", "ten", "ten", "ten", "ten", "ten", "ten", "ten", "ten", "ten", "ten", "six", "six", "six", "six", "six", "six"]
        .map(function(d,i) {
            //console.log(d);
            return {text: d, size: -i};
        });

var fontName = "Impact",
    cWidth = 720,
    cHeight = 400,
    svg,
    wCloud,
    bbox,
    ctm,
    bScale,
    bWidth,
    bHeight,
    bMidX,
    bMidY,
    bDeltaX,
    bDeltaY;

var cTemp = document.createElement('canvas'),
    ctx = cTemp.getContext('2d');
    ctx.font = "100px " + fontName;

var fRatio = Math.min(cWidth, cHeight) / ctx.measureText(words[0].text).width,
    fontScale = d3.scale.linear()
        .domain([
            d3.min(words, function(d) { return d.size; }), 
            d3.max(words, function(d) { return d.size; })
        ])
        //.range([20,120]),
        .range([20,100*fRatio/2]), // tbc
    fill = d3.scale.category20();

d3.layout.cloud()
    .size([cWidth, cHeight])
    .words(words)
    //.padding(2) // controls
    .rotate(function() { return ~~(Math.random() * 2) * 90; })
    .font(fontName)
    .fontSize(function(d) { return fontScale(d.size) })
    .on("end", draw)
    .start();

function draw(words, bounds) {
    // move and scale cloud bounds to canvas
    // bounds = [{x0, y0}, {x1, y1}]
    bWidth = bounds[1].x - bounds[0].x;
    bHeight = bounds[1].y - bounds[0].y;
    bMidX = bounds[0].x + bWidth/2;
    bMidY = bounds[0].y + bHeight/2;
    bDeltaX = cWidth/2 - bounds[0].x + bWidth/2;
    bDeltaY = cHeight/2 - bounds[0].y + bHeight/2;
    bScale = bounds ? Math.min( cWidth / bWidth, cHeight / bHeight) : 1;



    svg = d3.select(".cloud").append("svg")
        .attr("width", cWidth)
        .attr("height", cHeight)
     .call(d3.behavior.zoom().on("zoom", function () {
    svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")")
  }))


    wCloud = svg.append("g")

        .attr("transform", "translate(360,200)")
        .selectAll("text")
        .data(words)
        .enter().append("text")
        .style("font-size", function(d) { return d.size + "px"; })
        .style("font-family", fontName)
        .style("fill", function(d, i) { return fill(i); })
        .attr("text-anchor", "middle")
        .transition()
        .duration(500)
        .attr("transform", function(d) {
            return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
        })
        .text(function(d) { return d.text; });

    bbox = wCloud.node(0).getBBox();


};

このようなズームチャートを作成する正しい方法は何ですかhttps://bl.ocks.org/sgruhier/50990c01fe5b6993e82b8994951e23d0

SVGが内部にある正方形の固定コンテナで、ズームインしたときにすべてのページで移動することはありません。