Реагируйте на BarChart с помощью прокручиваемой оси X D3 - PullRequest
Новая
       6

Реагируйте на BarChart с помощью прокручиваемой оси X D3

0 голосов
/ 05 ноября 2018

В настоящее время я стараюсь изо всех сил реализовать гистограмму, которая позволяет пользователю прокручивать по оси X, пока ось Y остается на месте. Я использую React в качестве моей платформы. 

export default [
  { activity: 'Main Idea and Detail', value: 90, color: '#2A78E4' },
  { activity: 'Character and Plot', value: 80, color: '#2A78E4' },
  { activity: 'Elements of Poetry', value: 70, color: '#2A78E4' },
  { activity: 'Standard 8.10', value: 60, color: '#2A78E4' },
  { activity: '8.1.3', value: 50, color: '#2A78E4' },
  { activity: 'Skill 6', value: 40, color: '#2A78E4' },
  { activity: 'Skill 7', value: 30, color: '#2A78E4' },
  { activity: 'Skill 8', value: 21, color: '#2A78E4' },
  { activity: 'Skill 9', value: 10, color: '#2A78E4' },
  { activity: 'Skill 10', value: 5, color: '#2A78E4' },
  { activity: '8.1.34', value: 50, color: '#2A78E4' },
  { activity: 'Skill 60', value: 40, color: '#2A78E4' },
  { activity: 'Skill 70', value: 30, color: '#2A78E4' },
  { activity: 'Skill 80', value: 21, color: '#2A78E4' },
  { activity: 'Skill 90', value: 10, color: '#2A78E4' },
  { activity: 'Skill 100', value: 5, color: '#2A78E4' },
  { activity: 'Skill 900', value: 100, color: '#2A78E4' },
  { activity: 'Skill 1000', value: 50, color: '#2A78E4' },
  { activity: 'Skill -1', value: 5, color: '#2A78E4' },
  { activity: '8.1.35', value: 50, color: '#2A78E4' },
  { activity: 'Skill 160', value: 40, color: '#2A78E4' },
  { activity: 'Skill 10', value: 30, color: '#2A78E4' },
  { activity: 'Skill 20', value: 21, color: '#2A78E4' },
  { activity: 'Skill 80', value: 10, color: '#2A78E4' },
  { activity: 'Skill 650', value: 5, color: '#2A78E4' },
  { activity: 'Skill 300', value: 100, color: '#2A78E4' },
  { activity: 'Skill 3000', value: 50, color: '#2A78E4' }
];

Мой код, который я использую для генерации своих весов: 

generateScales = () => {
    const { height, margin, width } = this.state;
    const xScales = d3
      .scaleBand()
      .domain(this.props.data.map(d => d.activity))
      .range([margin.left, width - margin.right])
      .padding(0.5);

    const yScales = d3
      .scaleLinear()
      .domain([0, 100])
      .range([height - margin.bottom, 0]);
    this.setState({
      xScales,
      yScales
    });
  };

Для генерации моих весов я использую функцию renderAxis: 

renderAxis = () => {
    const xAxisBottom = d3.axisBottom().scale(this.state.xScales);
    const axisLeft = d3.axisLeft().scale(this.state.yScales);
    d3.select(this.refs.xAxis).call(xAxisBottom);
    d3.select(this.refs.yAxis).call(axisLeft);
  };

Я пытался использовать этот пример в качестве подсказки, но я не могу заставить эту строку работать должным образом "d3.behavior.drag (). On (" drag ", display)" http://bl.ocks.org/cdagli/ce3045197f4b89367c80743c04bbb4b6.

Я получаю сообщение об ошибке, что это не часть модуля d3, но пример явно использует его. Я думаю, я не знаю, с чего начать или как решить эту проблему. Я пытался решить это также с помощью CSS, но безрезультатно

Мне удалось создать «песочницу», и если кто-нибудь подскажет мне, как добиться прокручиваемой оси X, оставив ось Y на месте, это будет действительно оценено с помощью React. Является ли приведенный выше пример подходящим местом для поиска?

Я попытался решить свою проблему с помощью функции увеличения, похоже, это лучшее решение. Я все еще сталкиваюсь с проблемами при использовании d3.event.transform.rescaleX, кажется, что метод rescaleX не отображается в объекте d3.event.transform. Я действительно разочарован, поскольку все примеры, кажется, используют эту функцию. Любая помощь будет оценена.

https://codesandbox.io/s/k0pj5m8q93

1 Ответ

0 голосов
/ 10 ноября 2018

Код Песочница с решением: https://codesandbox.io/s/4q5zxmy3zw

Реагирует на полосу прокрутки на основе: http://bl.ocks.org/cdagli/ce3045197f4b89367c80743c04bbb4b6

D3 используется для расчета, React для рендеринга. Я надеюсь, что это поможет.

...