定位 xAxis 和 yAxis 带 d3.js

Question

我所拥有的工作，但我想知道是否有更好的方法。

我

有这个页面作为我的工作示例。 源代码在这里，这个问题专门处理绘制具有正值和负值的 x 轴和 y 轴。

我有一个drawAxes方法，如下所示：

  drawAxes(data) {
    const xAxis = d3.svg.axis()
            .scale(this.xScale);
    const yAxis = d3.svg.axis()
            .orient('left')
            .scale(this.yScale);
    const dimensions = this.getDimensions();
    this.xScale.domain(d3.extent(data, (d) => d.x));
    const minY = d3.min(data, (d) => d.y);
    const maxY = d3.max(data, (d) => d.y);
    const nonNegativeXAxis = minY >= 0 && maxY >= 0;
    const positiveAndNegativeXAxis = minY < 0 && maxY > 0;
    let yScaleDomain, xAxisPosition;
    if(nonNegativeXAxis) {
      yScaleDomain = [0, d3.max(data, (d) => d.y)];
    }  else {
      yScaleDomain = d3.extent(data, (d) => d.y);
    }
    this.yScale.domain(yScaleDomain);
    const findZeroTick = (data) => {
      return data === 0;
    };
    this.svg.append('g')
      .attr('class', 'axis y-axis')
      .style('visibility', 'hidden')
      .call(yAxis);
    if(nonNegativeXAxis) {
      yScaleDomain = [0, d3.max(data, (d) => d.y)];
      xAxisPosition = dimensions.height;
    } else if(positiveAndNegativeXAxis) {
      xAxisPosition = this.svg.selectAll(".tick").filter(findZeroTick).map((tick) => {
        return d3.transform(d3.select(tick[0]).attr('transform')).translate[1];
      });
    } else {
      yScaleDomain = d3.extent(data, (d) => d.y);
      xAxisPosition = 0;
    }
    this.svg.append('g')
      .attr('class', 'axis x-axis')
      .attr('transform', `translate(0, ${xAxisPosition})`)
      .call(xAxis);
    d3.select('.y-axis').remove();
    const minX = d3.min(data, (d) => d.x);
    const maxX = d3.max(data, (d) => d.y);
    const positiveXOnly = minX > 0 && maxX > 0;
    const negativeXOnly = minX < 0 && maxX < 0;
    let yAxisPosition;
    if(positiveXOnly) {
      yAxisPosition = 0;
    } else if(negativeXOnly) {
      yAxisPosition = dimensions.width;
    } else {
      yAxisPosition = this.svg.selectAll(".x-axis .tick").filter(findZeroTick).map((tick) => {
        return d3.transform(d3.select(tick[0]).attr('transform')).translate[0];
      });
    }
    this.svg.append('g')
      .attr('class', 'axis y-axis')
      .attr('transform', `translate(${yAxisPosition}, 0)`)
      .call(yAxis);
  }

我发现很大的困难是将 y 轴 x 轴定位在相反轴上的 0。

我是如何做到这一点的，首先是画 y 轴，但保持隐藏：

this.svg.append('g')
  .attr('class', 'axis y-axis')
  .style('visibility', 'hidden')
  .call(yAxis);

然后，我通过选择所有刻度并找到 0 刻度的 y 坐标，在 y 轴上找到了 0 的位置，我使用此值来定位 x 轴：

const findZeroTick = (data) => {
  return data === 0;
};
xAxisPosition = this.svg.selectAll(".tick").filter(findZeroTick).map((tick) => {
  return d3.transform(d3.select(tick[0]).attr('transform')).translate[1];
});
this.svg.append('g')
  .attr('class', 'axis x-axis')
  .attr('transform', `translate(0, ${xAxisPosition})`)
  .call(xAxis);

为了定位 yAxis，我首先删除 yAxis，然后通过选择 x 轴上的所有刻度进行类似的计算，然后再次添加 yAxis 并使用检索到的值来定位 yAxis：

d3.select('.y-axis').remove();
yAxisPosition = this.svg.selectAll(".x-axis .tick").filter(findZeroTick).map((tick) => {
  return d3.transform(d3.select(tick[0]).attr('transform')).translate[0];
});
this.svg.append('g')
  .attr('class', 'axis y-axis')
  .attr('transform', `translate(${yAxisPosition}, 0)`)
  .call(yAxis);

有没有更有效的方法来达到相同的结果或失败，我可以移动轴而不必删除它并重新添加它吗？

Answer 1

只要您的线性刻度具有域和范围，您就可以使用它来获取任何域值的像素值。例如，要获取点 (0， 0( 的像素，您需要询问 xScale(0) 和 yScale(0) 。

如果这些值超出定义的范围(读取：以像素为单位的 svg 画布尺寸(，则您知道 Y 轴应分别位于最左侧或右侧(最小或最大范围加上边距(。