D3 x-Achse für jeden Tag der Woche

Question

Ich habe ein JSON-Array wie folgt aus:

[ 
    { 
    "day": "Monday", 
    "sales": 242 
    }, 
    { 
    "day": "Tuesday", 
    "sales": 256 
    }, 
    ... 
] 

Diese Daten bedeckt eine Woche, so gibt es ein Objekt für jeden Tag von Montag bis Sonntag.

Ich habe ein Balkendiagramm mit D3 mit einem Balken für jeden Wochentag erstellt. Ich versuche nun, eine x-Achse mit einem Tick-Label für jeden Tag hinzuzufügen.

Ich habe folgendes einzurichten meine y-Achse getan:

var yScale = d3.scaleLinear() 
    .domain([0, d3.max(data, function(d) { 
    return d.sales; 
    })]) 
    .range([height, 0]); 

var yAxis = d3.axisLeft(yScale) 
    .ticks(5); 

svg.append("g") 
    .call(yAxis); 

Dies funktioniert gut, aber aus irgendeinem Grund bin ich ratlos, wie meine x-Achse einrichten mit jedem Wochentag unter der entsprechenden Leiste. Hinweis: Ich bin mit D3-Version 4.

Answer 1

Sobald Ihr days nur Strings sind, Sie scaleBand statt scaleTime verwenden:

var xScale = d3.scaleBand() 
    .domain(data.map(function(d){ return d.day})) 
    .range([0, width])//you can use rangeRound instead 
    .paddingInner(someValue);//the value of the inner padding, if any. 

Anschließend legen die x-Achse entsprechend:

var xAxis = d3.axisBottom(xScale); 

Überprüfen Sie dieses Codefragment:

var width = 550, height = 200; 
 

 
var data = [{day:"Monday"}, 
 
    {day:"Tuesday"}, 
 
    {day:"Wednesday"}, 
 
    {day:"Thursday"}, 
 
    {day:"Friday"}, 
 
    {day:"Saturday"}, 
 
    {day:"Sunday"} 
 
]; 
 

 
var svg = d3.select("body") 
 
\t .append("svg") 
 
\t .attr("width", width) 
 
\t .attr("height", height); 
 
\t 
 
var xScale = d3.scaleBand() 
 
    .domain(data.map(function(d){ return d.day})) 
 
    .range([0, width*0.95]) 
 
\t 
 
var xAxis = d3.axisBottom(xScale) 
 
    .ticks(7); 
 

 
svg.append("g") 
 
\t .attr("transform", "translate(0,100)") 
 
\t .call(xAxis);

text { font-size: 12px;}

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