D3.js试图显示条形图OVER地图

Question

我正在进行d3数据可视化，并且试图使我的条形图在背景中显示的地图上显示（基本上只是将其放在页面的中央）。目前，我的条形图显示在地图下方。

这是我的代码：

    var margin = {
        top: 15,
        right: 45,
        bottom: 15,
        left: 95
    };

    var width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;


    //var startBar2010 = 
    startBarChart.append("g").attr("class","bar2010");


    var svg = d3.select("#graphic").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        //.attr("align","center")
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + 
         margin.top + ")");

        var x = d3.scale.linear()
        .range([0, width])
        .domain([0, d3.max(data, function (d) {
            return d.value;
        })]);

    var y = d3.scale.ordinal()
        .rangeRoundBands([height, 0], .1)
        .domain(data.map(function (d) {
            return d.name;
        }));

    //make y axis to show bar names
    var yAxis = d3.svg.axis()
        .scale(y)
        //no tick marks
        .tickSize(0)
        .orient("left");

    var gy = svg.append("g")
        .attr("class", "y axis")
        .transition().delay(delay*1).ease(d3.easeLinear).duration(2500)
        .call(yAxis)

    var bars = svg.selectAll(".bar")
        .data(data)
        .enter()
        .append("g")

更多：

    //append rects
    bars.append("rect")
        .attr("class", "bar")
        .attr("x",  -500)
        .attr("y",  -25)
        .attr("width", 0)
        .attr("height", 35)
        .transition().delay(delay*1).ease(d3.easeLinear).duration(2500)
        .attr("y", function (d) {
            return y(d.name);
        })
        .attr("height", y.rangeBand())
        .attr("x", 0)
        .attr("width", function (d) {
            return x(d.value);
        });

更多：

    //add a value label to the right of each bar
    bars.append("text")
        .attr("class", "label")
        .attr("y", -42)
        .attr("x", -520)
        .transition().delay(delay*1).ease(d3.easeLinear).duration(2500)
        //y position of the label is halfway down the bar
        .attr("y", function (d) {
            return y(d.name) + y.rangeBand() / 2 + 4;
        })
        //x position is 3 pixels to the right of the bar
        .attr("x", function (d) {
            return x(d.value) + 3;
        })
        .text(function (d) {
            return d.value;
        });

任何帮助将不胜感激。