D3 Rect-Elemente werden nicht angezeigt

Question

Ich versuche, ein einfaches Balkendiagramm mit D3 Version 4.x.x zu erstellen. Ich glaube jedoch, dass ich alles richtig mache, aber die Rects nicht anzeigen kann. Ich habe einen Codepen angehängt, um dies zu sehen.

Vielen Dank im Voraus für alle Noob Problem, das dies verursacht, wie ich neu in D3 bin. http://codepen.io/PizzaPokerGuy/pen/XpoJxG?editors=0111

enter code here//Width of svg, will be used again down the road 
const width = 1000; 
//Height of svg, will be used again down the road 
const height = 800; 
//Padding so things have room to be displayed within svg 
const padding = 60; 
//Create our SVG container 
var svg = d3.select("body") 
.append('svg') 
.attr("width", width) 
.attr("height", height); 

//JSON Enter data 
var data =  d3.json('https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/mast er/GDP-data.json', 
    (error, data) => { 
    var chartData = data.data; 
    //Stores barWidth variable, math.ciel rounds up, used to set an equal width for each rect 
    var barWidth = Math.ceil((width - padding)/chartData.length); 
    //Define xScale 
    const xScale = d3.scaleLinear() 
    .domain([0, d3.max(chartData, (d) => d[0])]) 
    .range([padding, width - padding]); 
    //Define yScale 
const yScale = d3.scaleLinear() 
    .domain([0, d3.max(chartData, (d) => d[1])]) 
    .range([height - padding, padding]); 

//Selects SVG elements and selects all rect elements within it 
svg.selectAll("rect") 
    //Adds data to use later 
    .data(chartData) 
    //Allows us to add items to the dom if data is larger than ammoutn of rect elements selected 
    .enter() 
    //Adds rect element 
    .append("rect") 
    //Adds x attribute to x based off of d(chartData), need to create a date as a string is not enough 
    .attr("x", (d) => xScale(new Date(d[0]))) 
    //Sets y attribute of rectangle 
    .attr("y", (d) => yScale(d[1])) 
    //Sets height, we minus the value from height to invert the bars 
    .attr("height", (d) => height - yScale(d[1])) 
    //sets width of rect elements 
    .attr("width", barWidth) 
    //fill in color of rects 
    .attr("fill", "black"); 

});

Answer 1

Sie verwenden Termine für die X-Achse, so dass Sie besser sein, einen Zeitplan zu verwenden, anstatt scaleLinear

const xScale = d3.scaleTime() 
    .domain(d3.extent(chartData, function(d) { return new Date(d[0]); })) 
    .range([padding, width - padding]); 

Codepen: http://codepen.io/anon/pen/egbGaJ?editors=0111

Answer 2

Sie x Werte Strings sind, die Daten darstellen, aber Sie Ich habe nicht versucht, sie so zu behandeln. Ihr aktueller Code scale erwartet, dass es sich um Nummern handelt. Sie müssen also entscheiden, ob Sie sie als Zeichenfolgen oder Datumsangaben erstellen möchten. Zum Beispiel würde es so aussehen, wenn man sie zu Daten zwingen würde;

// a time parser 
var tF = d3.timeParse("%Y-%m-%d"); 
// convert to dates 
chartData.forEach(function(d){ 
    d[0] = tF(d[0]) 
}); 

... 

//Define xScale as a time scale 
const xScale = d3.scaleTime() 
    .domain([0, d3.max(chartData, (d) => d[0])]) 
... 

Aktualisiert codepen.