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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 20:27:16  来源:igfitidea点击:

D3 4.0 rangeRoundBands equivalent?

javascriptd3.js

提问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.scaleOrdinaland rangeRoundBandsseems to be gone.

由于D3版本4.0d3.scale.ordinal()是现在d3.scaleOrdinalrangeRoundBands似乎消失了。

> 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 rangeRoundBandswas 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

这是 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 的经典图表的可启动语法。