更改 yAxis 刻度 D3 的范围答案

【问题标题】：change the range of yAxis ticks D3更改 yAxis 刻度 D3 的范围
【发布时间】：2020-11-23 18:00:57
【问题描述】：

我需要更改 d3 图表中 yAxis 刻度的范围。目前，它的范围为 2M，如下所示：

大部分数据分布在 0 到 4M 之间。我希望有一个较小的刻度范围，直到 4M，然后是更大的范围。所以我会有 1M、2M、3M、4M 的刻度，然后是 8M、12M、16M。代码如下：

const width = 1000;
const height = 700;
const padding = 120; // between title and svg borders
const marginTop = 120;

// Min and max for y axis for Revenue values
const maxRevenue = d3.max(dataset, (d) => d[1]);
const minRevenue = d3.min(dataset, (d) => d[1]);

const yScale = d3
  .scaleLinear()
  .domain([minRevenue, maxRevenue])
  .range([height - padding, marginTop]);

const yAxis = d3.axisLeft(yScale);

svg
  .append("g")
  .attr("transform", `translate(${padding}, 0)`)
  .call(yAxis); // if need to move the chart to the right (for yaxis)

【问题讨论】：

答案可能在于使用不同的比例。看看这个：github.com/d3/d3-scale/blob/master/README.md
到目前为止你自己尝试过什么？
您想要等间距的刻度不准确地表示数据的数字范围？虽然这是可能的，但它不是表示数据的“诚实”方式。您是否考虑过诸如损坏的 y 轴或面板图之类的替代方案？
@Mark 我明白了，这可能不是表示数据的最佳方式，但是，只有一条记录具有像 16M 这样的大数字，而所有其他记录都在从 0 到6M。我已经查看了损坏的 y 轴，但认为在这种情况下它不会有帮助。我只是将 16M 的颜色从黑色更改为红色，以指示/强调它是最高数字并且范围不同。

标签： javascript d3.js range data-visualization yaxis

【解决方案1】：

我的建议是使用“拆分”y 轴。像这样的：

<html>
  <meta charset="utf-8" />
  <style>
    /* set the CSS */

    .bar {
      fill: steelblue;
    }
  </style>
  <body>
    <!-- load the d3.js library -->
    <script src="https://d3js.org/d3.v6.min.js"></script>
    <script>
      // set the dimensions and margins of the graph
      var margin = { top: 20, right: 20, bottom: 30, left: 100 },
        width = 500 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom,
        pbottomsize = 0.66,
        ptopsize = 0.25;

      // set the ranges
      var xd = ['A', 'B', 'C', 'D'];
      var x = d3.scaleBand().range([0, width]).padding(0.1).domain(xd);
      var y = d3.scaleLinear().range([height * pbottomsize, 0]).domain([0, 20]);
      var y1 = d3.scaleLinear().range([height * ptopsize, 0]).domain([1000000, 2000000]);

      var svg = d3
        .select('body')
        .append('svg')
        .attr('width', width + margin.left + margin.right)
        .attr('height', height + margin.top + margin.bottom);

      var g1 = svg
        .append('g')
        .attr('transform', 'translate(' + margin.left + ',' + (margin.top + height * 0.33) + ')');

      var g2 = svg
        .append('g')
        .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

      var data = d3.range(1, 100).map(function (d, i) {
        return {
          x: xd[Math.floor(Math.random() * xd.length)],
          y: Math.random() < 0.75 ? Math.random() * 20 : (Math.random() + 1) * 1000000,
        };
      });

      var data0 = data.filter(function(d){
        return d.y < 1000000;
      });

      var data1 = data.filter(function(d){
        return d.y > 1000000;
      })

      // append the rectangles for the bar chart
      g1
        .selectAll('.circle')
        .data(data0)
        .enter()
        .append('circle')
        .attr('cx', function (d) {
          return x(d.x) + (x.bandwidth() / 2);
        })
        .attr('r', 10)
        .attr('cy', function (d) {
          return y(d.y);
        })
        .style('fill', 'steelblue');

      g2
        .selectAll('.circle')
        .data(data1)
        .enter()
        .append('circle')
        .attr('cx', function (d) {
          return x(d.x) + (x.bandwidth() / 2);
        })
        .attr('r', 10)
        .attr('cy', function (d) {
          return y1(d.y);
        })
        .style('fill', 'red');

      // add the x Axis
      g1
        .append('g')
        .attr('transform', 'translate(0,' + (height * pbottomsize) + ')')
        .call(d3.axisBottom(x));

      // add the y Axis
      g1.append('g').call(d3.axisLeft(y));

      g2.append('g').call(d3.axisLeft(y1).ticks(3));

      var g3 = svg.append('g')
        .attr('transform', 'translate(' + 70.5 + ',' + 136 + ')')

      g3.append('path')
        .attr('d', 'M 10 10 Q 20 0, 30 10 T 50 10 M 30 10 L 30 -2')
        .attr('stroke', 'black')
        .attr('fill', 'none');

      g3.append('path')
        .attr('d', 'M 10 20 Q 20 10, 30 20 T 50 20 M 30 20 L 30 32')
        .attr('stroke', 'black')
        .attr('fill', 'none');
        
    </script>
  </body>
</html>

【讨论】：