Гистограмма D3: переворачивая ось Y, мои данные - PullRequest
Новая
       22

Гистограмма D3: переворачивая ось Y, мои данные

0 голосов
/ 27 февраля 2019

Я столкнулся с общей проблемой при создании гистограммы в d3: моя ось Y была вверх ногами.После некоторого поиска в Google я обнаружил, что лучший способ исправить это - поменять местами y-доменЕдинственная проблема заключается в том, что когда я это сделал, столбцы на моем графике поменялись местами, поэтому наибольшее было в начале, а не в конце.Мне нужно, чтобы ось Y была правильной, без изменения моих стержней.

Бары в правильных положениях, но ось Y перевернута

enter image description here

Неверные столбцы, но ось Y направлена ​​вверх

enter image description here

Вот код: https://codepen.io/lucassorenson/pen/rPRadR?editors=0010

const yScale = d3.scaleLinear()
  .domain([0, d3.max(json, (d) => d[1])])
  .range([h - padding, padding]);
const yAxis = d3.axisLeft(yScale);

Это код, который я изменил.Если вы измените диапазон ([padding, h - padding]), столбцы будут правильными, а ось - нет.

1 Ответ

0 голосов
/ 27 февраля 2019

Исправление заключается в простом обмене функций обратного вызова атрибутов «высота» и «у».

Ваш код был: 

...
svg.selectAll('rect')
    .data(json)
    .enter()
    .append('rect')
    .attr('width', 3)
    .attr('height', (d) => yScale(d[1]))
    .attr('x', function(d, i){
      return i*4 + padding
    })
    .attr('y', function(d){
      return  h - yScale(d[1]) - padding
    })

измените его на: 

...
svg.selectAll('rect')
    .data(json)
    .enter()
    .append('rect')
    .attr('width', 3)
    .attr('y', (d) => yScale(d[1]))
    .attr('x', function(d, i){
      return i*4 + padding
    })
    .attr('height', function(d){
      return  h - yScale(d[1]) - padding
    })

С помощью атрибута "y" вы обычно устанавливаете верхний край прямоугольника, а через "высоту" вы указываете, как далеко он опускается.

...