D3 轴原点根据其比例范围变化答案

【问题标题】：D3 axis origin changes as per its scales rangeD3 轴原点根据其比例范围变化
【发布时间】：2016-10-15 17:51:27
【问题描述】：

我对 D3s 轴对象如何获取其原点位置以及它的锚定位置有点困惑（我假设它的左上角）

另外，例如，原点似乎根据相关比例的范围而变化，下面的两个轴将从不同的位置开始

第一轴

    //Xscale with scale not augmented       
    var stageXScale=d3.scaleLinear()            
      .domain([0,150])
      .range([0,150]);

    var stageXAxis = d3.axisBottom(stageXScale)   //unaug axis
        .ticks(20);

第二轴

    //scale which is augmented
    var stageXScaleAug=d3.scaleLinear()            
      .domain([0,stageWidth])
      .range([0+stageMarginLeft,150+stageMarginLeft]);

    var stageXAxisAug = d3.axisBottom(stageXScaleAug)       //aug axis
        .ticks(20);

轴的原点不是映射到父容器的原点，如果是，为什么轴的比例会改变这一点。这是 Js 小提琴示例：

https://jsfiddle.net/Snedden27/3wsx8bdy/12/

【问题讨论】：

标签： javascript d3.js svg

【解决方案1】：

轴的原点位置（transform之前）由刻度范围的最小值确定。

对于轴 1，范围是 [0,150]，轴从父元素的屏幕 x 坐标 0 开始。（轴在 x 坐标 150 处结束。）

对于轴 2，范围为 [0+stageMarginLeft,150+stageMarginLeft]，因此该轴从父元素的屏幕 x 坐标 stageMarginLeft (20) 开始。

【讨论】：

有没有一种方法可以让我始终在父节点的原点开始一个轴，无论比例如何
在这种情况下，你为什么不总是从 0 开始你的刻度范围呢？这就是range 的目的。范围是屏幕坐标相对于父坐标轴的显示范围。