javascript - 使用 react-d3-components 包的 D3 水平条形图

Question

我正在使用react-d3-componentsD3 图表。我成功地生成了条形图。但我的要求是生成水平条形图

var React = require('react');
var ReactDOM = require('react-dom');
var d3 = require('d3');
var BarChart = require('react-d3-components').BarChart;

var data = [{
    label: 'somethingA',
    values: [{x: 'SomethingA', y: 10}, {x: 'SomethingB', y: 4}, {x: 'SomethingC', y: 3}]
}];

ReactDOM.render(
    <BarChart
        data={data}
        width={400}
        height={400}
        margin={{top: 10, bottom: 50, left: 50, right: 10}}/>,
        document.getElementById('root')
);

我需要输出水平条形图。

Answer 1

我通过遵循本教程实现了这一点：https ://medium.com/@caspg/responsive-chart-with-react-and-d3v4-afd717e57583

然后我交换了 x 轴和 y 轴的细节。所以在我们的例子中，y 轴是 scaleBand()，x 轴是 scaleLinear()

我还交换了 Bars 组件中的条的宽度和高度，以获得条的正确方向。