折线图 d3js v5 上的可滚动 x 轴（刻度点）

Question

我试图在 d3js 中使缩放点 X 轴可滚动。

由于某种原因，我无法完成这项工作。 我想要实现的是：

• X 轴上仅显示几个刻度。 在我的 JSFiddle 中，它设置为 2，但它显示了所有 X 轴刻度。
• 最初使 X 轴从右边开始一直到最后 2 个值（在我的示例中为“test4”和“test5”）。 向左滚动必须导致“test”、“test1”和“test3”可见。

    var data = [
      {xValue: "test", yValue: 10}, 
      {xValue: "test1", yValue: 20}, 
      {xValue: "test3", yValue: 10}, 
      {xValue: "test4", yValue: 25},
      {xValue: "test5", yValue: 18},
    ];

    var maxYValue = Math.max(...data.map(o => +o.yValue), 0);
    var margin = { top: 20, right: 8, bottom: 20, left: 35 };

    var width = document.getElementById("chart").clientWidth;
    var height = document.getElementById("chart").clientHeight;

    var xScale = d3
      .scalePoint()
      .domain( data.map(({ xValue }) => {
              return xValue;
            }))
      .range([0, width])
      .padding([0.5]);

    var yScale = d3
      .scaleLinear()
      .domain([0, maxYValue])
      .range([height, 0]);

    var svg = d3
      .select("#chart")
      .append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr(
        "transform",
        "translate(" + margin.left + ", " + margin.top + ")"
      )
      .call(
        d3.zoom().on("zoom", () => {
          console.log("how to implement this?");
          _svg.attr("transform", d3.event.transform);
        })
      );

    var line = d3
      .line()
      .x(d => {
        return xScale(d.xValue);
      })
      .y(d => yScale(+d.yValue))
      .curve(d3.curveMonotoneX);

    // Ticks for axisBottom is not working
    var xAxis = d3.axisBottom(xScale).ticks(2);
    var yAxis = d3.axisLeft(yScale);

    // Append x-Axis
    svg
      .append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
      .attr("class", "x-axis");

    // Y-Axis
    svg.append("g").call(yAxis);

    // Append line
    svg
      .append("path")
      .datum(data)
      .attr("d", line(data))
      .attr("fill", "none")
      .attr("stroke", "#aaa")
      .attr("stroke-width", 3);

https://jsfiddle.net/mojpgyux/3/

如果有更多经验的人可以帮助我，那就太好了！