D3スケールが私の棒グラフを台無しにします

Question

私は各データに対してrect要素を描く単純な棒グラフを書いています。これは正常に動作鱗のない私のコードの一部です：私はyスケールを追加した場合

const rect = svg.selectAll("rect") 
     .data(dataset) 
     .enter() 
     .append("rect") 
     .attr("x", (d, i) => (i*4)) 
     .attr("y", (d) => h - d[1]/50) 

しかし、私のバーは裏返し、と私はxスケールを追加した場合、私は1つのバーを見ることができます。ここでは鱗を持つ私のコードだ：

const xScale = d3.scaleLinear() 
    .domain([0, d3.max(dataset, (d) => d[0])]) 
    .range([padding, w - padding]); 
    const yScale = d3.scaleLinear() 
    .domain([0, d3.max(dataset, (d) => d[1])]) 
    .range([h - padding, padding]); 

//some other code 
    const rect = svg.selectAll("rect") 
     .data(dataset) 
     .enter() 
     .append("rect") 
     .attr("x", (d, i) => xScale(i*4)) 
     .attr("y", (d) => yScale(d[1]/50)) 

はここでスケールと私のCodePenだ、それはそれは次のようになります。誰かが私が間違って何をやっている私に言った場合http://codepen.io/enk/pen/vgbvWq?editors=1111

私は本当にGREATFULだろう。

Answer 1

D3スケールはあなたのチャートを乱さない。ここの問題は簡単です。

は今のところ、これはあなたのデータセットです。

[["1947-01-01", 243.1], ...] 

あなたが見ることができるように、d[0]は（日付を表す）文字列、ない数です。また、d3.scaleLinearでは、ドメインは2つの値のみを持つ配列です。

ここscaleBand代わりに使用しているソリューション：

const rect = svg.selectAll("rect") 
    .data(dataset) 
    .enter() 
    .append("rect") 
    .attr("width", xScale.bandwidth()) 
    .attr("x", (d => xScale(d[0]))) //xScale 
    .attr("height", (d => h - yScale(d[1]))) //yScale 
    .style("y", (d => yScale(d[1]))) 
    .attr("data-date", (d) => d[0]) 
    .attr("data-gdp", (d) => d[1]) 
    .attr("class", 'bar') 

：

const xScale = d3.scaleBand() 
    .domain(dataset.map(d => d[0])) 
    .range([padding, w - padding]); 

や長方形のコードを変更し、実際使用スケール（私はそれらをチェックし、いくつかの変更を加えた）へ

ここにあなたのアップデートされたCodePenがあります：http://codepen.io/anon/pen/NdJGdo?editors=0010