如何在d3地图中显示县工具提示？

Question

我正在尝试在D3地图中创建工具提示。 （也使用DC.js）。问题在于，似乎包含地图的DC图表（mexicoChart）高于一切，或者与以下代码不兼容 （添加之后什么也没发生）：

var width = 960 
var height = 500 
var projection = d3.geo.mercator()
 .scale(1200)
    .center([-102.34034978813841, 24.012062015793]);    
var path = d3.geo.path()
             .projection(projection);
var svg = d3.select("svg")
            .append("g")
            .attr("width", width)
            .attr("height", height);
var tooltip = d3.select("body").append("div")
            .attr("class", "tooltip")
            .style("opacity", 0)
            .style("width", 600);

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



d3.json("static/geojson/mx_tj.json", function(error, mx) {
  svg.selectAll("path")
    .data(topojson.feature(mx, mx.objects.municipalities))
    .enter().append("path")
    .attr("d", d3.geo.path().projection(projection))
    .attr("fill", "transparent")
    .style("stroke", "#333")
    .style("stroke-width", ".2px")
    .attr("class", "muns");

  g.selectAll("path")
    .data(topojson.feature(mx, mx.objects.states))
    .enter().append("path")
    .attr("d", d3.geo.path().projection(projection))
    .attr("fill", "transparent")
    .style("stroke", "#333");

 svg.append("g")
        .attr("class", "muns")
        .selectAll("path")
        .data(topojson.feature(mx, mx.objects.municipalities))
        .enter().append("path")
        .attr("d", path)
        .on("mouseover", function (d) {var tip = "<h3>" + d.properties.name + "</h3>";
    tooltip.html(tip)
        .style("left", (d3.event.pageX) + "px")
        .style("top", (d3.event.pageY) + "px");

    tooltip.transition()
        .duration(500)
        .style("opacity", .7); })
        .on("mouseout", function (d) {  tooltip.transition()
        .duration(500)
        .style("opacity", 0);
    });



});

这是DC图表所在的代码的第二部分：

queue()
    .defer(d3.json, "/homicidios/projects")
    .defer(d3.json, "static/geojson/municipios.json")
    .await(makeGraphs);




function makeGraphs(error, projectsJson, mx) {

    //Clean projectsJson data
    var homicidiosProjects = projectsJson;
    var dateFormat = d3.time.format("%Y-%m-%d %H:%M:%S");
    homicidiosProjects.forEach(function(d) {
        d["fecha"] = dateFormat.parse(d["fecha"]);
        d["fecha"].setMinutes(0);
        d["fecha"].setSeconds(0);
        //  d["no_muertos"] = +d["no_muertos"];
    });

    //Create a Crossfilter instance
    var ndx = crossfilter(homicidiosProjects);

    //Define Dimensions
    var FechaDim = ndx.dimension(function(d) {
        return d["fecha"];
    });
    var zonaDim = ndx.dimension(function(d) {
        return d["entidad_federativa"];
    });
    var pobrezaDim = ndx.dimension(function(d) {
        return d["marginacion"];
    });
    var MunDim = ndx.dimension(function(d) {
        return d["CVE_MUN"];
    });
    var noMuertosDim = ndx.dimension(function(d) {
        return d["no_muertos"];
    });


    //Calculate metrics
    var numProjectsPorFecha = FechaDim.group();
    var numProjectsPorZona = zonaDim.group();
    var numProjectsPorPobreza = pobrezaDim.group();
    var noMuertosPorMun = MunDim.group().reduceSum(function(d) {
        return d["no_muertos"];
    });

    var all = ndx.groupAll();
    var noMuertos = ndx.groupAll().reduceSum(function(d) {
        return d["no_muertos"];
    });

    var max_mun = noMuertosPorMun.top(1)[0].value;

    //Define values (to be used in charts)
    var minDate = FechaDim.bottom(1)[0]["fecha"];
    var maxDate = FechaDim.top(1)[0]["fecha"];

    //Charts
    var timeChart = dc.barChart("#time-chart");
    var zonaChart = dc.rowChart("#zona-row-chart");
    var pobrezaChart = dc.rowChart("#pobreza-row-chart");
    var mexicoChart = dc.geoChoroplethChart("#mexico-Chart");
    var numberProjectsND = dc.numberDisplay("#number-projects-nd");
    var noMuertosND = dc.numberDisplay("#no-muertos-nd");



    numberProjectsND
        .formatNumber(d3.format("d"))
        .valueAccessor(function(d) {
            return d;
        })
        .group(all);

    noMuertosND
        .formatNumber(d3.format("d"))
        .valueAccessor(function(d) {
            return d;
        })
        .group(noMuertos)
        .formatNumber(d3.format(".3s"));

    timeChart
        .width(1000)
        .height(180)
        .margins({
            top: 10,
            right: 50,
            bottom: 20,
            left: 50
        })
        .dimension(FechaDim)
        .group(numProjectsPorFecha)
        .transitionDuration(500)
        .x(d3.time.scale().domain([minDate, maxDate]))
        .elasticY(true)
        .xAxisLabel("Dia")
        .yAxis().ticks(10);

    zonaChart
        .width(300)
        .height(350)
        .dimension(zonaDim)
        .group(numProjectsPorZona)
        .xAxis().ticks(4);

    pobrezaChart
        .width(300)
        .height(250)
        .dimension(pobrezaDim)
        .group(numProjectsPorPobreza)
        .xAxis().ticks(4);


    d3.json("static/geojson/municipios.json", function (error, mx) { 


    mexicoChart.width(1000)
        .height(630)
        .dimension(MunDim)
        .group(noMuertosPorMun)


        .colors(["#FFE5EC", "#FFCCD9", "#FFB2C6", "#FF99B3", "#FF7FA0", "#FF668D", "#FF4C7A", "#FF3367", "#FF1954", "#FF0041"])
        .colorDomain([0, max_mun])
        .overlayGeoJson(mx.features, "municipio", function(d) {
            return d.properties.CVE_MUN;
        })

        .projection(d3.geo.mercator()
            .center([-101.45, 19.28])
            .scale(1600)
            .translate([490, 490]))
        .title(function(p) {
            return "State: " + p["key"] + 
                "\n" +
                "Total Muertos: " + Math.round(p["value"]) + " $";
        })



dc.renderAll();


});

}