D3条形图：第一个条重叠轴标签

Question

我已经用D3制作了一个条形图，但我遇到了这两个我无法解决的小问题。

1）条形图的第一个条与y轴重叠

2）当数量（体积）超过100万时，y轴标记的标签在左侧消失。

以下是正在发生的事情的快照：

这是我的D3代码：

function drawGraph(dataGraph){
        if (dataGraph.length == 0){
            $('#graph-container').append('<h3>No Data Match</h3>');
            return;
        }
        var margin = {top: 20, right: 20, bottom: 70, left: 40},
            width = 900   - margin.left - margin.right,
            height = 300 - margin.top - margin.bottom,
            padding = 15;

         var max = d3.max(dataGraph, function(d) { return +d.VOLUME;} );
         var maxDate = d3.max(dataGraph, function(d) { return +d.AS_OF_DATE;} );

         var x = d3.scale.ordinal()
         .domain(dataGraph.map(function(d) {return d.AS_OF_DATE;}))
         .rangeRoundBands([0, (width- padding )], .1);
            
         var y = d3.scale.linear()                    
         .domain([0,max])
         .range([height,0]);

         var xAxis = d3.svg.axis()
         .scale(x)
         .orient('bottom');
         
         var yAxis = d3.svg.axis()
         .scale(y)
         .orient('left')
         .ticks(10);

         var svg = d3.select("#graph-container")
         .append("svg")
         .attr("width", width + margin.left + margin.right)
         .attr("height", height + margin.top + margin.bottom)
         .append("g")
         .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

         svg.append('g')
         .attr('class', 'x axis')
         .attr("transform", "translate(0," + height + ")")
         .call(xAxis)
         .selectAll("text")
         .style("text-anchor", "end")
         .style("color", "#333")
         .attr("dx", "-.8em")
         .attr("dy", "-.55em")
        .attr("transform", "rotate(-90)" );

         svg.append("g")
         .attr("class", "y axis")
         .attr("transform", "translate(" + padding + ",0)")
         .call(yAxis)
         .append("text")
           .attr("transform", "rotate(-90)")
           .attr("y", 6)
           .attr("dy", ".71em")
           .style("text-anchor", "end")
           .style("color", "#333")
           .text("Volume");

         svg.selectAll('.bar')
         .data(dataGraph)
         .enter().append('rect')                    
         .attr('class', 'bar')
         .attr("x", function(d) { return x(d.AS_OF_DATE); })
         .attr("width", x.rangeBand())
         .attr("y", function(d) { return y(d.VOLUME); })
         .attr("height", function(d) { return height - y(d.VOLUME); });
        
    }