D3，设置最大y轴数答案

【问题标题】：D3, set a max number of the y-axis linesD3，设置最大y轴数
【发布时间】：2018-04-10 13:42:43
【问题描述】：

我想知道如何将 y 轴的数量限制为 5。如您所见，目前的行数比这多。

这是代码：

<!DOCTYPE html>
<style type="text/css">
.area {
    fill: url(#temperature-gradient);
    stroke-width: 05px;
  }
}
</style>
<svg width="860" height="400"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
  var svg = d3.select("svg"),
    margin = {
      top: 20,
      right: 50,
      bottom: 30,
      left: 50
    },
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var parseTime = d3.timeParse("%d-%b-%y");

  d3.tsv("data.tsv", function(d) {
    d.date = parseTime(d.date);
    d.close = +d.close;
    return d;
  }, function(error, data) {
    if (error) throw error;


    var area = d3.area()
      .x(function(d) {
        return x(d.date);
      })
      .y1(function(d) {
        return y(d.close);
      });


    var x = d3.scaleTime()
      .rangeRound([0, width]);

    var y = d3.scaleLinear()
      .rangeRound([height, 0]);

    var line = d3.line()
      .x(function(d) {
        return x(d.date);
      })
      .y(function(d) {
        return y(d.close);
      });

    x.domain(d3.extent(data, function(d) {
      return d.date;
    }));
    y.domain([0, d3.max(data, function(d) {
      return d.close;
    })]);
    area.y0(y(0));

    var xAxis = d3.axisBottom(x)
      .ticks(d3.timeYear);

    var yAxis = d3.axisRight(y)
      .tickSize(width);


    //GRADIENT FILL
    g.append("linearGradient")
      .attr("id", "temperature-gradient")
      .attr("gradientUnits", "userSpaceOnUse")
      .attr("x1", 0).attr("y1", y(20))
      .attr("x2", 0).attr("y2", y(300))
      .selectAll("stop")
      .data([{
          offset: "0%",
          color: "white"
        },
        {
          offset: "100%",
          color: "#b3d9ff"
        }

      ])
      .enter().append("stop")
      .attr("offset", function(d) {
        return d.offset;
      })
      .attr("stop-color", function(d) {
        return d.color;
      });

    //FILL AREA
    g.append("path")
      .datum(data)
      .attr("class", "area")
      .attr("d", area);


    //LINE
    g.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "#80bfff")
      .attr("stroke-linejoin", "round")
      .attr("stroke-linecap", "round")
      .attr("stroke-width", 1.5)
      .attr("d", line);

    //X-AXIS SET UP
    function customXAxis(g) {
      g.call(xAxis);
      g.select(".domain").remove();
      g.selectAll(".tick line");
      g.selectAll(".tick line").attr("stroke", "#cdd7e9");
    }

    //Y-AXIS SET UP
    function customYAxis(g) {
      g.call(yAxis);
      g.select(".domain").remove();
      g.selectAll(".tick line").attr("stroke", "#cdd7e9");
      g.selectAll(".tick:not(:first-of-type) line").attr("stroke", "#cccccc").attr("stroke-width", 0.5);
      g.selectAll(".tick text").attr("x", width + 15).attr("dy", -4);
    }


    g.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(customXAxis);

    g.append("g")
      .call(customYAxis);


  });

如果可能的话，还有一个问题，我想知道您如何才能使至少在额外的 y 轴线上（在 650 上会是额外的线，或者如果更改为仅 5 线则更高的数字，在此一）超过图表中的最高数字。

【问题讨论】：

标签： javascript d3.js axis

【解决方案1】：

你应该在你的坐标轴上设置刻度：

axis.ticks(5)

在你的情况下：

var yAxis = d3.axisRight(y)
      .ticks(5)
      .tickSize(width);

您使用刻度设置 X 轴编号，y 轴应该相同。

【讨论】：