d3 - x轴准时，间隔30分钟

Question

我使用x-axis创建了d3.svg.axis()。

我将它定位到bottom，但它仍然出现在svg之上。即使x-axis标签也不可见。

JS：

var x = d3.time.scale()
            .range([0, width])

var xAxis = d3.svg.axis()
                .scale(x)
                .orient("bottom");

var xAxisGroup = svgContainer.append("g")
                 .call(xAxis);

数据：

time,count
00:12,1
00:45,1
01:14,1
01:30,1
01:57,1
02:21,1
02:44,1
02:50,1
03:13,1
03:41,1
03:59,1
04:10,1
04:23,1
04:45,1
04:59,1
05:01,1
05:17,1
05:48,1
06:00,1
06:11,1
06:23,1
06:31,1
06:47,1
07:12,1
07:29,1
07:41,1
07:58,1

整个代码：

    var height = 200;
var width = 1000;
var count = 50, padding = 11;

var x = d3.time.scale()
            .range([0, width])

var xAxis = d3.svg.axis()
                .scale(x)
                .orient("bottom");

var svgContainer = d3.select(".spectrum")
                        .append("svg")
                        .attr("class", "g")
                        .attr("width", width)
                        .attr("height", height)

function movein() {
    d3.selectAll("line")
        .attr("stroke", "#555")
        .transition()
        .duration(500)
        .attr("stroke", "#fff")
        .attr("y1", 90)
        .attr("y2", 25)

    d3.select(this)
        .attr("y1", 90)
        .attr("y2", 25)
        .transition()
        .duration(500)
        .attr("y1", 115)
        .attr("y2", 0)
        .attr("stroke", "#555")

    var xvalue = d3.select(this)
                    .attr('x1')

    var yvalue = d3.select(this)
                    .attr('y1')

    d3.select('.g')
        .append('text')
        .attr('x', +xvalue - 20)
        .attr('y', +yvalue + 40)
        .text('TEXT')
}

function moveout() {
    d3.selectAll("line")
        .attr("stroke", "#fff")
        .transition()
        .duration(500)
        .attr("stroke", "#555")
        .attr("y1", 90)
        .attr("y2", 25)

    d3.selectAll('text').remove();
}

var xAxisGroup = svgContainer.append("g")
                          .call(xAxis);

// for(var i = 0; i < count; ++i) {
    d3.csv("data2.csv", function(data) {
    var line = svgContainer.selectAll("line")
                        .data(data)
                        .enter()
                        .append("line")
                        .attr("x1", function(d,i){return padding*i})
                        .attr("x2", function(d,i){return padding*i})
                        .attr("y1", 90)
                        .attr("y2", 25)
                        .attr("stroke", "#555")
                        .attr("stroke-width", 10)
                        .on("mouseover", movein)
                        .on("mouseout", moveout)
    })

这里我希望配置30分钟的时间间隔。

帮助将非常感谢。