如何修复溢出的react-vis多色条形图

Question

我正在尝试用uber的react-vis库制作一个多色条形图。我遇到的问题是，最左边的条形图溢出在YAxis的下面，而不是包含在它的右边。

您可以查看这个REPL https://codepen.io/anon/pen/mozzeE?editors=0011。

function Chart() {
  const data = [1,2, 3]
  return <XYPlot
          // xType="ordinal"
          width={300}
          height={300}
          xDistance={100}
         >
          <HorizontalGridLines />
          {data.map((n, k) => {
        const y = data.length+5 - n
        return <VerticalBarSeries
                 className="vertical-bar-series-example"
                 color={makeHexString()}
                 data={[
            {x: n, y}
          ]}/>

    })}

          <YAxis />
  </XYPlot>;
}

Answer 1

对于谁会遇到这样的问题:您需要使用like为XYPlot指定xDomain：xDomain={min_X_value，max_X_value}

其中min_X_value，max_X_value -X的最小值和最大值