我想在我的直方图中设置栏内距,就像你有一个序数刻度一样:
x = d3.scaleLinear()
.domain([fist, last])
.rangeRound([bottom, top])
.padding(someFractionBetweenZeroAndOne)
不。这行不通。然后我前往API文档,在连续尺度上没有.padding
方法!
好吧,我可以手动计算我的条宽度,但是真的没有集成的padding
解决方案可用于连续尺度吗?
这使得没有的意义,以线性比例填充!
然而,有几种方法可以为条形图添加一些空间,比如使用分组(就像Bostock在这个例子中所做的那样),并在分组内设置矩形的位置,使其与邻居有一些空间。
另一种选择是改变矩形的位置和尺寸(如您所说,"手动计算我的条宽度")。例如,在这个演示中,我将每个栏的宽度更改为每个bin宽度的90%。var data = [{x:0, y:10},
{x:2, y:40},
{x:4, y:70},
{x:6, y:30},
{x:8, y:20}];
var svg = d3.select("body")
.append("svg")
.attr("width", 300)
.attr("height", 200);
var xScale = d3.scaleLinear()
.domain([0, 10])
.range([0, 300]);
var barWidth = xScale.domain()[1]/data.length;
var yScale = d3.scaleLinear()
.domain([0, 80])
.range([200, 0]);
var bars = svg.selectAll(".bars")
.data(data)
.enter()
.append("rect");
bars.attr("x", function(d){ return xScale(d.x)})
.attr("y", function(d){ return yScale(d.y)})
.attr("width", function(d,i){ return xScale(barWidth) * 0.9})
.attr("height", function(d){ return 200 - yScale(d.y)});
rect {
fill: teal;
}
<script src="https://d3js.org/d3.v4.min.js"></script>