React D3 条形图可滚动 X 轴

Question

I am a true newbie when it comes to D3. I am currently trying my best to implement a bar chart that allows the user to scroll on the x-axis while the Y-Axis remains in place. I am using React as my framework.

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' }
];

My code I am using to generate my scales are:

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
    });
  };

To generate my scales I use the renderAxis function:

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);
  };

I was trying to use this example as a clue, but I am unable to get this line to properly work "d3.behavior.drag().on("drag", display)" http://bl.ocks.org/cdagli/ce3045197f4b89367c80743c04bbb4b6 .

I receive an error that this is not part of the d3 module, but the example is clearly using it. I guess I do not know where to start or how to tackle this problem. I tried to solve it also by using css, but to no avail

I was able to create a sandbox and if anybody could give me a clue on how to achieve a scrollable X-axis while having the Y-axis stay in place it will be really appreciated.

https://codesandbox.io/s/k0pj5m8q93

Answer 1

I solved my issue by providing my scales with the correct data. My mistake was thinking that I can just arbitrarily insert any number and receive the correct coordinates. For my particular situation, I have to feed the scales the correct data.

So for my given data model:

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' }
];

I have to set my X axis to my activity by doing this:

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

Now that d3 is aware of my x-axis I can then set Y to any value as long as it does not exceed 100 which is the top of Y-axis.

So my Y-Axis looks like this now:

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

And my path looks like this:

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

I hope this makes some sense and helps someone who is trying to have a horizontal line for there bar charts.