d3 散点图标签

Question

我是 d3 和前端的新手 你能看看我的轴上没有显示最大值吗？就像没有 2015 年或 Y 尺度上没有 39.50 一样，即使 d3.max 在数组中看到它们。

https://codepen.io/DeanWinchester88/pen/QWgGMja

const xScale = d3.scaleLinear()
                      .domain([ d3.min(years), d3.max(years)  ])
                      .range([paddings.paddingLeft,w - paddings.paddingRight - paddings.paddingLeft]);
      const xAxis = d3.axisBottom(xScale).tickFormat(d3.format("d"));
      svg.append("g")
                     .attr("transform", "translate(0," + (h - paddings.paddingLeft) + ")")
                      .attr("id","x-axis")
                      .call(xAxis);
  const yScale = d3.scaleLinear()
                      .domain([ parseInt(d3.min(timings)), parseInt(d3.max(timings))])
                      .range([h - paddings.paddingBottom, paddings.paddingTop]);
  const yAxis = d3.axisLeft(yScale).tickFormat( (d) =>  `(${d.toFixed(2)}`);
      svg.append("g")
       .attr("transform", "translate(" + paddings.paddingLeft + ",0)")
        .attr("id","y-axis")
       .call(yAxis)

Answer 1

正如 cmets 中所述，如何解析 y 轴的域存在问题：使用 parseInt 不会捕获整个域。这仅影响轴线延伸的距离，而不影响刻度是否捕获整个域。

默认报价

至于刻度，D3 轴优先考虑干净的数字和理想的刻度数（如果我没记错的话，默认为 10 - 尽管数字更多的是建议而不是约束）。此外，轴生成器不考虑轴的渲染大小。

如果我们有一个从 1.999 到 9.999 的域，我们会看到我们的刻度是 2,3,4,5,6,7,8,9，如上所述优先考虑计数和圆度：

var scale = d3.scaleLinear()
  .domain([1.999,9.999])
  .range([20,290])
  
console.log(scale.ticks());

d3.select("body")
  .append("svg")
  .attr("transform","translate(0,50)")
  .call(d3.axisBottom(scale));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

轴延伸到 9.999，只是这超出了最后一个刻度，看起来确实有点奇怪

虽然在文本数量和数量方面，这比 1.999、2.999、3.999... 的刻度更清晰，但它并没有显示域的范围。

在某些情况下，增加刻度数 (axis.ticks(idealNumberOfTicks)) 会产生所需的结果，这在处理由表示年份的整数组成的域时可能是正确的，例如您的情况：.ticks(d3.max(years)-d3.min(years));，它应该为每年创建刻度，因为考虑到所需的刻度数，整数被认为是合适的整数。

指定特定记号

我们可以使用axis.tickValues([values])指定要用作刻度的值，这将设置轴中使用的刻度。在您的年份轴的情况下，这相当简单，我们希望为每个唯一年份打勾，因此我们只需要创建一个包含每年的数组：

 .tickValues(d3.range(d3.min(years),d3.max(years))); 

事情并不总是这么直截了当。使用上面 sn-p 中的示例比例（更类似于您的 y 比例），我们可以使用 scale.ticks() 提供的刻度并添加两个新刻度，但这意味着当将手动刻度与自动生成的刻度相结合：

var scale = d3.scaleLinear()
  .domain([1.999,9.999])
  .range([20,290])
 
var ticks = [1.999,...scale.ticks(),9.999];

var axis = d3.axisBottom(scale)
  .tickValues(ticks)
  .tickFormat(d3.format(".3f"))
  
var svg  = d3.select("body")
  .append("svg")
  .attr("transform","translate(0,60)")
  .call(axis);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

我们可以使这个更复杂，以更好地设置刻度值，但它会非常依赖于数据，通常会导致非圆形刻度值，并且可能通过使用 scale.nice() 更好地解决，如下所述。

如果丢弃自动生成的刻度，特别是在处理时间或日期时，另一个选择是使用 d3.time 要求每个指定间隔的刻度，如d3-axis docs 中的示例所述：@ 987654331@。但是，这并没有设置刻度，因此它们包含整个域。

scale.nice()

然而，有一个比手动添加或覆盖自动刻度更好的选择，这是使用 scale.nice()，它：

扩展域，以便它以漂亮的圆形值开始和结束。 这种方法通常会修改尺度的域，并且可能只扩展 到最接近的舍入值的界限。一个可选的滴答计数参数 允许更好地控制用于扩展边界的步长， 保证返回的刻度将完全覆盖该域。 如果域是从数据中计算出来的，那么 Nicing 很有用，比如使用 范围，并且可能是不规则的。例如，对于 [0.201479... 的域， 0.996679…]，一个不错的域可能是 [0.2, 1.0]。如果域有两个以上的值，则对域进行微调只会影响第一个和最后一个 价值。 (docs)

以上面的例子我们得到：

var scale = d3.scaleLinear()
  .domain([1.999,9.999])
  .range([20,290])
  .nice()
  
console.log(scale.ticks());

d3.select("body")
  .append("svg")
  .attr("transform","translate(0,50)")
  .call(d3.axisBottom(scale));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

这是我为您的 y 刻度提供的解决方案，同时指定特定的刻度或使用 axis.ticks() 指定刻度的数量非常适合您的 x 轴。