D3 Rect要素が表示されない

Question

D3バージョン4.x.xを使用して単純な棒グラフを設定しようとしていますが、正しく処理しているとは思いますが、私はこれを見るためにcodepenを付けました。

私はD3を初めて使用しているため、この問題の原因となっている問題について事前にお詫び申し上げます。 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

あなたはX軸の日付を使用しているので、あなたはタイムスケールではなくscaleLinear

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

Codepen使用する方がよいでしょう：あなたは値が日付を表す文字列であるxはhttp://codepen.io/anon/pen/egbGaJ?editors=0111

Answer 2

をが、彼らをそのように扱う試みはなかった。あなたの現在のscaleコードは、それらが数字であることを期待しています。だからあなたは文字列や日付としてそれらを作成することを決定する必要があります。たとえば、日付に強制すると、次のようになります。

// 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])]) 
... 

codepenが更新されました。