richten Sie die Datenpunkte des Diagramms auf die Ticks auf der X-Achse

Question

Ich wollte ein Liniendiagramm erstellen, das Daten darstellt, die über ein paar Monate gesammelt wurden. Ich kam mit dem Code unten. Das Problem ist, dass ich denke nicht, dass die Linie die Daten korrekt darstellt (oder es ist nicht, wie ich es wollte). Sie sehen, die path Linie geht nicht bis zum "4 mo" Tick führt die Benutzer zu glauben, dass die Daten in etwa 3 und ein halbes Jahr endet.

Ich möchte alle Vertices (nicht sicher, den richtigen Begriff, ich denke, es könnte der Datenpunkt visualisiert werden), um richtig auf die Ticks abgestimmt werden. Also sollte der erste Datenpunkt auf "1 mo" und der zweite Datenpunkt auf "2 mo" usw. stehen. Und das ist sehr wichtig, der letzte Datenpunkt sollte am Ende sein das Diagramm und der Monat 4 sollten ebenfalls am Ende der Achsenlinie stehen. Gerade jetzt geht die Linie nicht über die ganze Breite des Svg.

var data = [ 
 
    {"quarter" : "1mo", "votes" : 400}, 
 
    {"quarter" : "2mo", "votes": 200}, 
 
    {"quarter": "3mo", "votes" : 1000}, 
 
    {"quarter" : "4mo", "votes" : 0} 
 
] 
 

 
var width = 500; 
 
var height = 300; 
 
//supposed to get the domain ([0, 1000]) 
 
var yscale = d3.scale.linear().domain([0, d3.max(data, function(d) {return d.votes})]) 
 
yscale.range([height, 0]) 
 

 
console.log(yscale(900)) //291 
 

 
var xscale = d3.scale.ordinal() 
 
.domain(data.map(function(d) {return d.quarter})) 
 
.rangeRoundBands([0,width]) 
 

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

 

 
var line = d3.svg.line() 
 
.x(function(d){return xscale(d.quarter) }) 
 
.y(function(d) {return yscale(d.votes) }) 
 
// .interpolate("basis") 
 

 
var svg = d3.select("body") 
 
.append("svg") 
 
.attr({ 
 
    "width" : (width + 20), 
 
    "height": height + 20 
 
}) 
 

 
svg.append("g") 
 
.append("path") 
 
.attr("d", line(data)) 
 
.attr({ 
 
    "fill" : "none", 
 
    "stroke" : "limegreen", 
 
    "stroke-width" : "3px" 
 
}) 
 

 
svg.append("g") 
 
.call(xAxis) 
 
.attr({ 
 
    "transform" : "translate(0," + (height) + ")" 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

Answer 1

Sie müssen jede der Ecken zur Mitte des rangeBand verschieben:

var line = d3.svg.line() 
    .x(function(d){return xscale(d.quarter) + xscale.rangeBand()/2 }) 
    .y(function(d) {return yscale(d.votes) }); 

Sie können mehr lesen über die Ordnungs here skaliert.

Wenn Sie die x-Ticks wollen bei 0 beginnen, können Sie rangePoints statt rangeRoundBands verwenden:

var xscale = d3.scale.ordinal() 
    .domain(data.map(function(d) {return d.quarter})) 
    .rangePoints([0,width]); 

Hier ist eine Arbeits Geige: https://jsfiddle.net/6d7wqeyh/

Sie können sehen, dass die Werte erhalten getrimmt. Aber ich denke, Sie haben die Idee.