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) 

Однако, если добавить у масштаба, мои бары перевернуться, и если я добавлю й масштаб, я вижу только один бар. Вот мой код с весами:

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