Question

关于D3，我是一个真正的新手。我目前正在尽力实现一个条形图，该条形图允许用户在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。 / p>

我收到一个错误，它不是d3模块的一部分，但是示例显然正在使用它。我想我不知道从哪里开始或如何解决这个问题。我也尝试过使用CSS解决此问题，但无济于事

我能够创建一个沙箱，如果有人可以给我一个如何在保持Y轴固定的同时实现可滚动的X轴的线索，将不胜感激。

https://codesandbox.io/s/k0pj5m8q93

Answer 1

我通过为秤提供正确的数据解决了我的问题。我的错误是认为我可以随意插入任何数字并接收正确的坐标。对于我的特殊情况，我必须为秤提供正确的数据。

因此对于我给定的数据模型：

export default [
  { activity: 'Main Idea and Detail', value: 10, color: '#2A78E4' },
  { activity: 'Character and Plot', value: 20, color: '#2A78E4' },
  { activity: 'Elements of Poetry', value: 31, color: '#2A78E4' },
  { activity: 'Skill 4', value: 40, color: '#2A78E4' },
  { activity: 'Skill 5', value: 56, color: '#2A78E4' },
  { activity: 'Skill 6', value: 60, color: '#2A78E4' },
  { activity: 'Skill 7', value: 60, color: '#2A78E4' },
  { activity: 'Skill 8', value: 71, color: '#2A78E4' },
  { activity: 'Skill 9', value: 70, color: '#2A78E4' },
  { activity: 'Skill 10', value: 90, color: '#2A78E4' }
];

我必须通过执行以下操作将X轴设置为我的活动：

 d3.line()
    .x((info, index) => {
      return xScales(info.activity);
    })

现在d3知道了我的x轴，然后我可以将Y设置为任何值，只要它不超过100（这是Y轴的顶部）即可。

所以我的Y轴现在看起来像这样：

.y(data => {
          return yScales(baseLine - 1.2);
        });

我的路径如下：

          <path
          d={path(data)}
          x={70}
          className="line"
          style={{ fill: 'green', strokeWidth: 2, stroke: 'red' }}
           />

我希望这有道理，并能帮助那些试图在条形图中有一条水平线的人。

React D3条形图可滚动X轴

1 个答案: