Javascript D3 4.0 rangeRoundBands 等效吗?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/37548408/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
D3 4.0 rangeRoundBands equivalent?
提问by mikewilliamson
I see a lot of D3 code that has something like this:
我看到很多 D3 代码都有这样的内容:
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
As of D3 version 4.0 d3.scale.ordinal()
is now d3.scaleOrdinal
and rangeRoundBands
seems to be gone.
由于D3版本4.0d3.scale.ordinal()
是现在d3.scaleOrdinal
和rangeRoundBands
似乎消失了。
> d3.scaleOrdinal()
{
[Function: scale]
domain: [Function],
range: [Function],
unknown: [Function],
copy: [Function]
}
What would the D3 v4 equivalent of this code (from Mike Bostock's bar chart example) be?
与此代码(来自 Mike Bostock 的条形图示例)等效的 D3 v4是什么?
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
回答by Gerardo Furtado
In D3 4.x rangeRoundBands
was moved to the new Bandscale:
在 D3 4.xrangeRoundBands
中移动到新的Band音阶:
d3.scaleBand()
.range([range])
.round([round]);
That's equivalent to:
这相当于:
d3.scaleBand()
.rangeRound([range]);
Here is the API: https://github.com/d3/d3-scale#band-scales
回答by Nan Zhou
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
The above calculates bands and sets padding between band. In v4, the equivalent is
以上计算波段并设置波段之间的填充。在 v4 中,等价物是
var x = d3.scaleBand()
.rangeRound([0, width])
.padding(0.1);
回答by u7182389
var svg = d3.select("svg"),
margin = {top: 20, right: 20, bottom: 30, left: 60},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom;
var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
y = d3.scaleLinear().rangeRound([height, 0]);
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.tsv("data.txt", function(d) {
d.y = +d.y;
return d;
}, function(error, data) {
if (error) throw error;
x.domain(data.map(function(d) { return d.x; }));
y.domain([0, d3.max(data, function(d) { return d.y; })]);
A launchable syntax for a classic chart using both scaleBand and scaleLinear.
使用 scaleBand 和 scaleLinear 的经典图表的可启动语法。