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

【问题标题】：how to fix overflowing uber react-vis multi color barchart如何修复溢出的 uber react-vis 多色条形图
【发布时间】：2019-03-21 02:42:50
【问题描述】：

我正在尝试使用 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>;
}

【问题讨论】：

标签： javascript css reactjs react-vis

【解决方案1】：

对于谁会因此而陷入困境：您需要为 XYPlot 指定 xDomain，如下所示： xDomain={[min_X_value, max_X_value]}

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

【讨论】：