D3秤搞砸了我的條形圖

Question

我正在寫一個簡單的條形圖，爲每一塊數據繪製矩形元素。這是我的代碼無鱗，其正常工作的一部分：

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

但是，如果我加y標尺，我的酒吧翻轉過來，如果我添加X-規模，我只能看到一個酒吧。這裏是我的代碼規模：

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

我會非常感激，如果有人告訴我，我在做什麼錯。

Answer 1

D3秤不會搞亂你的圖表。這裏的問題很簡單。

眼下，這是你的數據集：

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

正如你所看到的，d[0]是字符串（表示日期），而不是數量。並且，在d3.scaleLinear中，該域是一個只有兩個值的數組。

在這裏的解決方案是使用scaleBand代替：

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

並改變矩形的代碼實際上使用鱗（我做了一些改動，檢查它們）：

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') 

這裏是你更新的CodePen：http://codepen.io/anon/pen/NdJGdo?editors=0010