[英]D3 4.0 rangeRoundBands equivalent?
我看到很多D3代碼都具有以下內容:
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
從D3版本4.0開始, d3.scale.ordinal()
現在d3.scaleOrdinal
而rangeRoundBands
似乎消失了。
> d3.scaleOrdinal()
{
[Function: scale]
domain: [Function],
range: [Function],
unknown: [Function],
copy: [Function]
}
此代碼的D3 v4等價物是什么(來自Mike Bostock的條形圖示例 )?
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
在D3 4.x范圍內, rangeRoundBands
已移至新的Band比例:
d3.scaleBand()
.range([range])
.round([round]);
這等效於:
d3.scaleBand()
.rangeRound([range]);
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
以上計算頻段並設置頻段之間的填充。 在v4中,等效項是
var x = d3.scaleBand()
.rangeRound([0, width])
.padding(0.1);
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; })]);
使用scaleBand和scaleLinear的經典圖表的可啟動語法。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.