Achsen in D3 ausrichten

Question

Ich konnte das folgende Liniendiagramm mit meiner drawLine-Funktion rendern. Wie Sie sehen können, stimmen die Markierungen der X-Achse nicht perfekt mit den Punkten überein. Wie kann ich die X-Achsen-Teilstriche nach links verschieben, so dass der "10 Sep" -Takt genau unter der y-Achse liegt?

Hier ist mein Code:

function drawLine(line_data) { 
var vizLine = line_data; 

var date_format = d3.time.format("%d %b"); 
var xline = d3.time.scale() 
    .range([0, width]); 

var yline = d3.scale.linear() 
    .range([height, 0]); 

var xAxisline = d3.svg.axis() 
    .scale(xline) 
    .orient("bottom") 
    .tickFormat(date_format); 

var yAxisline = d3.svg.axis() 
    .scale(yline) 
    .orient("left") 
    .tickFormat(d3.format("d")); 

var line = d3.svg.line() 
    .x(function(d) { 
     return xline(d.date2); 
    }) 
    .y(function(d) { 
     return yline(d.books); 
    }); 

var div = d3.select("body").append("div") 
    .attr("class", "tooltip")    
    .style("opacity", 0); 

var lineGraph = d3.select("body").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 + ")"); 

vizLine.forEach(function(d) { 
    d.date = d[0]; 
    d.books = +(d[1]); 
    d.date2 = Date.parse(d.date); 
}); 

xline.domain(d3.extent(vizLine, function(d) { 
    return d.date2; 
})); 
yline.domain([0, d3.max(vizLine, function(d) { 
    return (d.books + 1); 
})]); 

lineGraph.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxisline); 

lineGraph.append("path") 
    .datum(vizLine) 
    .attr("class", "line") 
    .attr("d", line); 

lineGraph.selectAll("dot") 
    .data(vizLine)   
    .enter().append("circle")        
    .attr("r", 5)  
    .attr("cx", function(d) { 
     return xline(d.date2);    
    })  
    .attr("cy", function(d) { 
     return yline(d.books);   
    })  
    .on("mouseover", function(d) {  
     div.transition()   
     .duration(200)  
     .style("opacity", .9);  
     div.html(d.date + "<br/>" + d.books + " books") 
     .style("width", 70) 
     .style("height", 35) 
     .style("left", (d3.event.pageX) + "px")  
     .style("top", (d3.event.pageY - 28) + "px");  
    })     
    .on("mouseout", function(d) {  
     div.transition()   
     .duration(500)  
     .style("opacity", 0); 
    });  
} 

Answer 1

Wahrscheinlich eine von Null verschiedene x-Komponente auf die Übersetzung der x-Achse korrigiert Ihre Fehler der Anwendung, aber es ist schwer, ohne zu sehen, den gesamten Code zu erzählen.

So etwas wie

lineGraph.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(" + margin.left + "," + height + ")") 
    .call(xAxisline);