d3 - 版本4中的缩放填充

Question

如何制作x-scale的非填充边缘？版本3中有rangeBand（），但我使用d3版本4。

        var x = d3.scaleBand().rangeRound([0, width], .05).padding(0.1),
            y = d3.scaleLinear().rangeRound([height, 0]);

Answer 1

简答：

你不能再这样了。

答案很长：

在D3 v4.x中，有一种outerPadding频段比例方法：

  

带 .paddingOuter（[填充]）：

     

如果指定了填充，则将外部填充设置为指定值，该值必须在 [0,1] 范围内。如果未指定填充，则返回当前外部填充，默认为0.外部填充确定在第一个波段之前和最后一个波段之后为空白区域保留的范围的比率。 （强调我的）

但是，正如您所看到的，该值仅从0到1。

这是一个零填充外部的演示：

var w = 500, h = 100;
var svg = d3.select("body")
	.append("svg")
  .attr("width", w)
  .attr("height", h);
  
var scale = d3.scaleBand()
	.domain("ABCDEFGHIJKL".split(""))
  .range([20, w - 20])
  .paddingOuter(0)
  
var axis = d3.axisBottom(scale);

var gX = svg.append("g")
	.attr("transform", "translate(0,50)")
  .call(axis)

<script src="https://d3js.org/d3.v4.min.js"></script>

这是另一个具有最大（1）外部填充：

var w = 500, h = 100;
var svg = d3.select("body")
	.append("svg")
  .attr("width", w)
  .attr("height", h);
  
var scale = d3.scaleBand()
	.domain("ABCDEFGHIJKL".split(""))
  .range([20, w - 20])
  .paddingOuter(1)
  
var axis = d3.axisBottom(scale);

var gX = svg.append("g")
	.attr("transform", "translate(0,50)")
  .call(axis)

<script src="https://d3js.org/d3.v4.min.js"></script>

GitHub上有一个open issue，要求无限制的外部填充，以及pull request中Mike Bostock（D3创建者）的评论。

可能的解决方案

当然，你可以下载D3 v4并调整band scale功能，创建你自己的功能，没有任何禁止你。如果您想要遵循这种方法，请查看上面链接的拉取请求，它只是从源代码中删除Math.min(1, _)。

更简单的解决方案是下面这个hacky：在域的开头和结尾创建假值...

.domain(["foo", "bar", "baz"].concat(domain).concat(["foobar", "foobaz", "barbaz"]))

...并在轴上忽略它们：

var axis = d3.axisBottom(scale)
    .tickValues(domain);

以下是演示：

var w = 500, h = 100;
var svg = d3.select("body")
	.append("svg")
  .attr("width", w)
  .attr("height", h);
  
var domain = "ABCDEFGHIJKL".split("")
  
var scale = d3.scaleBand()
	.domain(["foo", "bar", "baz"].concat(domain).concat(["foobar", "foobaz", "barbaz"]))
  .range([20, w - 20]);
  
var axis = d3.axisBottom(scale)
	.tickValues(domain);

var gX = svg.append("g")
	.attr("transform", "translate(0,50)")
  .call(axis)

<script src="https://d3js.org/d3.v4.min.js"></script>