我尝试使用d3创建条形图,一切正常,但我的X轴没有周末数据,自然我在条形图之间有一些空格。
谁知道如何摆脱它们?
我如何渲染条
return values(stack).map((d, index) =>
<rect key={index} clipPath="url(#gf)"
className={`bar ${d.y < 0 ? 'negative' : 'positive'}`}
style={{fill: color(stack.label)}}
data-legend={stack.key}
x={x(d.x) + ((xScale.rangeBand() * seriesIndex) / data.length)}
y={d.y < 0 ? _yScale(0) : _yScale(d.y)}
width={width <= 0 ? 2 : width}
height={Math.abs(_yScale(d.y) - _yScale(0))}
></rect>
);
变量:
this.state = {
...
x: d3.time.scale(),
y: d3.scale.linear(),
...
};
x.range([0, this.xScaleWidth])
.domain(this.calculateDomain(data, 'x'));
const xScale = d3.scale.ordinal()
.domain(values(stack).map(e => { return e.x; }))
.rangeRoundBands([0, this.xScaleWidth], 0.4, 0);
const width = xScale.rangeBand() / data.length;
const _yScale = d3.scale.linear()
.domain(yDomain)
.range([this.props.dim.height, 0])
.nice();
我做错了什么?