Question

在d3轴生成中遇到奇怪的情况。使用d3.axisBottom()为序数域值创建底部x轴时，在轴的刻度的起点和终点添加额外的填充。 d3.scaleBand()域中包含更多值的情况。

我猜蜱生成会因某些阈值数量的域项而缩小。

Ticks与平均数量的项目平均分配，一旦超过限制，它会在第一个和最后一个刻度上用填充收缩。

对上述情况的正确解释将更加重视。

var width = 400, height = 200;

var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);
  
var xAxisScale = d3.scaleBand()
 .domain([1,3,5,7,8,10,12,13,14,15,16,17,18,19,20,22,23,24,25,26,27,28,29,30,31,32,33,34,36,37,39,40,41,43,45,46,47,48,49,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,69,70,71,72,73,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,95,98,99,105,106,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,127,128,129,130,131,135,136,141,154])
    .rangeRound([10, width -10])
    .padding(0.1);
    
var xAxisScale1 = d3.scaleBand()
 .domain([1,3,5,7,8,10,12,13,14,15,16,17,18,19,20,22,23,24,25,26,27,28,29,30,31,32])
    .rangeRound([10, width -10])
    .padding(0.1);    
    
var xAxis = d3.axisBottom(xAxisScale);
var xAxis1 = d3.axisBottom(xAxisScale1);

svg.append("g").attr("transform", "translate(0,20)").call(xAxis);
svg.append("g").attr("transform", "translate(0,60)").call(xAxis1);

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

Answer 1

这里的罪魁祸首是rangeRound。这是预期的行为，并在API：

中进行了解释

如果指定了round，则相应地启用或禁用舍入。如果启用了舍入，则每个波段的开始和停止将为整数。舍入有时可用于避免抗锯齿伪像，但也考虑形状渲染“crispEdges”样式。请注意，如果域的宽度不是范围基数的倍数，则可能会有剩余的未使用空间，即使没有填充！（强调我的）

所以，解决方案很简单：改为使用range：

＆＃13;

var width = 400,
  height = 200;

var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

var xAxisScale = d3.scaleBand()
  .domain(d3.range(200))
  .range([10, width - 10])

var xAxisScale1 = d3.scaleBand()
  .domain(d3.range(20))
  .range([10, width - 10])

var xAxis = d3.axisBottom(xAxisScale);
var xAxis1 = d3.axisBottom(xAxisScale1);

svg.append("g").attr("transform", "translate(0,20)").call(xAxis);
svg.append("g").attr("transform", "translate(0,60)").call(xAxis1);

＆＃13;

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

＆＃13;

Axis为大型域

1 个答案: