D3-Verschiebung Ticks zum Ausrichten mit Achse

Question

Ich versuche, ein D3-Liniendiagramm zu erstellen, das monatliche Daten anzeigt. Das Diagramm zeichnet, aber die Ticks auf der X-Achse sind verschoben und stimmen nicht mit den gezeichneten Datenpunkten überein. Wie Sie auf dem Screenshot sehen können, werden die Ticks direkt von den Datenpunkten verschoben.

Ich habe versucht herauszufinden, wie man die Zecken transformieren kann, aber ohne Glück. Vielen Dank!

Hier ist ein Screenshot. Hier ist mein Code:

// set the dimensions and margins of the graph 
 
var margin = {top: 20, right: 20, bottom: 50, left: 50}, 
 
    width = 960 - margin.left - margin.right, 
 
    height = 500 - margin.top - margin.bottom; 
 

 
// set the ranges 
 
var x = d3.scaleBand().range([0, width]); 
 
var y = d3.scaleLinear().range([height, 0]); 
 

 
// define the line 
 
var valueline = d3.line().x(function(d) { return x(d.month); }) 
 
    .y(function(d) { return y(d.average); }); 
 

 
// append the svg obgect to the body of the page 
 
// appends a 'group' element to 'svg' 
 
// moves the 'group' element to the top left margin 
 
var svg = d3.select("#chart") 
 
    .attr("width", width + margin.left + margin.right) 
 
    .attr("height", height + margin.top + margin.bottom) 
 
.append("g") 
 
    .attr("transform", 
 
     "translate(" + margin.left + "," + margin.top + ")"); 
 

 
// Get the data 
 
var data = [{"month":"january","average":0},{"month":"february","average":0},{"month":"march","average":0},{"month":"april","average":9.0},{"month":"may","average":892.0},{"month":"june","average":10.0},{"month":"july","average":92.0},{"month":"august","average":9281.0},{"month":"september","average":8402.0},{"month":"october","average":823213.0},{"month":"november","average":82.0},{"month":"december","average":0}]; 
 

 
x.domain(data.map(function(d) { return d.month; })); 
 
y.domain([0, d3.max(data, function(d) { return d.average; })]); 
 

 

 
// Add the valueline path. 
 
console.log(valueline); 
 
svg.append("path") 
 
    .data([data]) 
 
    .attr("class", "line") 
 
    .attr("d", valueline); 
 

 
// Add the X Axis 
 
svg.append("g") 
 
    .attr("class", "e4rAxis") 
 
    .attr("transform", "translate(0," + height + ")") 
 
    .call(d3.axisBottom(x)) 
 
    .selectAll("text") 
 
     .style("text-anchor", "end") 
 
     .attr("dx", "-.8em") 
 
     .attr("dy", ".15em") 
 
     .attr("transform", "rotate(-65)"); 
 

 
// xAxisElement.selectAll(".tick").attr("transform", "translate(0,-5)"); 
 

 
// Add the Y Axis 
 
svg.append("g") 
 
    .call(d3.axisLeft(y)); 
 

 
svg.selectAll("dot") 
 
    .data(data) 
 
    .enter().append("circle") 
 
    .attr("r", 5) 
 
    .attr("cx", function(d) { return x(d.month); }) 
 
    .attr("cy", function(d) { return y(d.average); });

.line { 
 
        fill: none; 
 
        stroke: steelblue; 
 
        stroke-width: 2px; 
 
        } 
 

 
        .axis path, .axis line { 
 
        fill: none; 
 

 
        shape-rendering: crispEdges; 
 
        } 
 

 
        .line { 
 

 
        } 
 

 
        .area { 
 
        fill: steelblue; 
 
        opacity: 0.5; 
 
        } 
 

 

 
        .dot { 
 
        fill: steelblue; 
 
        stroke: steelblue; 
 
        stroke-width: 1.5px; 
 
        }

<script src="https://d3js.org/d3.v4.min.js"></script> 
 

 
<svg width="960" height="500" id="chart"></svg>

Answer 1

Es gibt zwei Möglichkeiten, um Ihr Problem zu beheben.

1. Fest Code und einige padding für Ihre Linie und Kreise so eingestellt, dass sie mit Ihrer x Achse auszurichten.

   // define the line 
       var valueline = d3.line().x(function(d) { 
        return x(d.month) + 38; //set x padding of 38 
   }) 
   .y(function(d) { 
   return y(d.average); 
       }); 
   
   svg.selectAll("dot") 
   .data(data) 
   .enter().append("circle") 
   .attr("r", 5) 
   .attr("cx", function(d) { 
       return x(d.month) + 38; 
       }) 
   .attr("cy", function(d) { 
       return y(d.average); 
       }); 
   

JSFiddle - https://jsfiddle.net/L5dctwsz/

2. Verwenden d3.scaleTime da Sie mit Monatsnamen zu tun haben, die das Problem lösen wird.

Set es wie folgt aus:

var x = d3.scaleTime().range([0, width]); 

den Monat Parse und dann die Domäne:

// parse the date/time 
var parseMonth = d3.timeParse("%B"); 
data.forEach(function(d) { 
    d.month = parseMonth(d.month); 
}); 

x.domain(d3.extent(data, function(d) { 
    return d.month; 
})); 

JSFiddle - https://jsfiddle.net/pm7gLn2u/