gpt4 book ai didi

javascript - 如何在 d3.js v4 中设置连续比例的填充(例如 scaleLinear)?

转载 作者:行者123 更新时间:2023-11-30 11:48:27 24 4
gpt4 key购买 nike

我正在尝试在我的直方图中设置条形填充,其方式与使用序数刻度的方式大致相同:

x = d3.scaleLinear()
.domain([fist, last])
.rangeRound([bottom, top])
.padding(someFractionBetweenZeroAndOne)

没有。那是行不通的。然后我前往 API documentation在连续尺度上没有 .padding 方法!

好吧,我可以手动计算我的条形宽度,但是真的没有可用于连续缩放的集成填充解决方案吗?

最佳答案

以线性比例填充没有意义!

但是,有几种方法可以为条形添加一些空间,例如使用组(如 Bostock 在 this example 中所做的那样)并设置组内矩形的位置,使其与邻居有一些空间。

另一种方法是更改​​矩形的位置和尺寸(如您所说,“手动计算我的条形宽度”)。例如,在此演示中,我将每个条形的宽度更改为每个 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>

关于javascript - 如何在 d3.js v4 中设置连续比例的填充(例如 scaleLinear)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40179381/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com