MapZoom函数未触发-D3.js

Question

我正在尝试将缩放行为添加到d3可视化中，而且显然做错了，因为我无法使实际的缩放行为起作用。我想说的是，我在实际的d3.SelectAll（）语句中使用了错误的变量名，但事实并非如此。任何帮助将不胜感激

以下是相关代码：

var width = 1000, height = 710;

var svg = d3.select("#chart").append("svg")
                        .attr("width", width)
                        .attr("height", height);

var map = svg.append("g");

var cities2010 = svg.append("g");

var projection = d3.geo.mercator()
                .scale(153)
                .translate([width / 2, height / 1.5]);

         //.rotate([rotated, 0, 0]); //center on USA because 'murica

var path = d3.geo.path()
        .projection(projection);


var color = d3.scale.category10();

var graticule = d3.geo.graticule();

d3.select("svg").append("path")
            .datum(graticule)
            .attr("class", "graticule line")
            .attr("d", path)
            .style("fill", "none")
            .style("stroke", "lightgray")
            .style("stroke-width", "1px");


d3.select("svg").append("path")
            .datum(graticule.outline)
            .attr("class", "graticule outline")
            .attr("d", path)
            .style("fill", "none")
            .style("stroke", "black")
            .style("stroke-width", "1px");          

var mapZoom = d3.behavior.zoom()
                .translate(projection.translate())
                .scale(projection.scale())
                .on("zoom", zoomed);

d3.select("svg").call(mapZoom);


function zoomed() {
    projection.translate(mapZoom.translate()).scale(mapZoom.scale());

    d3.selectAll("path.graticule").attr("d", path);
    d3.selectAll("path.countries").attr("d", path);

    d3.selectAll(".city_2010.crime")
    .attr("cx", function (d) { return projection([d.longitude, 
d.latitude])[0]; })
    .attr("cy", function (d) { return projection([d.longitude, 
d.latitude])[1]; });

}; 



d3.json("../static/data/world-50m.json", function (world) { 
        map.selectAll('.geo-path')
        .data(topojson.feature(world, 
world.objects.countries).features)
        .enter().append('path')
        .attr('class', 'geo-path')
        .attr('d', path)
        .attr("visibility", "visible")
        .style("stroke-opacity", 1)
        .style("fill-opacity", 0.5);

    });

cities2010.selectAll(".city_2010")
        .data(crimes)
        .enter().append("circle")
        .attr("class", "city_2010")
        .attr('id', function (d) { return "id_2010_" + d.rank_pop; })
        .style("fill-opacity", 0)
        .style("fill", "#DA6761")
        .attr("r", 0)
        .attr("cx", function (d) { return projection([d.longitude, \ 
        d.latitude])[0]; })
        .attr("cy", function (d) { return projection([d.longitude, \ 
        d.latitude])[1]; });