React BarChart 使用 D3 可滚动 X 轴答案

【问题标题】：React BarChart using D3 scrollable X-AxisReact BarChart 使用 D3 可滚动 X 轴
【发布时间】：2019-04-09 05:52:34
【问题描述】：

我目前正在尽最大努力实现一个条形图，该条形图允许用户在 Y 轴保持原位的同时在 x 轴上滚动。我使用 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 来解决它，但无济于事

我能够创建一个沙箱，如果有人能给我一个线索，告诉我如何在 Y 轴保持原位的同时实现可滚动的 X 轴，使用 React 将不胜感激。上面的例子是正确的地方吗？

我试图通过使用缩放功能来解决我的问题，这似乎是最好的解决方案。使用 d3.event.transform.rescaleX 时我仍然遇到问题，似乎 rescaleX 方法没有出现在 d3.event.transform 对象上。我真的很沮丧，因为所有示例似乎都在使用此功能。任何帮助将不胜感激。

https://codesandbox.io/s/k0pj5m8q93

【问题讨论】：

我认为这是版本不匹配的问题。您展示的示例使用的是 d3 版本 3，而您使用的是版本 5。v3 和 v4 之间进行了大量重构，我认为您正在尝试使用已拆分的模块
谢谢。由于我使用的是版本 5，因此我无法访问 d3.event.transform.rescaleX，并且我在互联网上搜索无济于事。我已经更新了我的代码沙箱。

标签： reactjs d3.js bar-chart

【解决方案1】：

带有解决方案的代码沙盒： https://codesandbox.io/s/4q5zxmy3zw

React 滚动条图基于： http://bl.ocks.org/cdagli/ce3045197f4b89367c80743c04bbb4b6

D3 用于计算，React 用于渲染。我希望这会有所帮助。

【讨论】：