CODEWITHSUNDEEP
javascriptd3.jssvg
Snedden27
Snedden27

Reputation: 1920

D3 axis origin changes as per its scales range

I am a little confused on how D3s axis object takes its origin position and where it is anchored(I assume its top left)

Also it seem like the origin point changes as per the range of the associated scale for instance,the two axis below would start at different position

1st axis

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

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

2nd axis

    //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);

Isn't the origin of the axis mapped to the origin of the parent container,if so why does the scale of the axis change this. Here is Js fiddle example :

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

Upvotes: 0

Views: 62

Answers (1)

xli
xli

Reputation: 1308

The position of the origin of the axis (prior to transform) is determined by the minimum value of the range of the scale.

For axis 1, the range is [0,150] and the axis starts at screen x-coordinate 0 of the parent element. (The axis ends at x-coordinate 150.)

For axis 2, the range is [0+stageMarginLeft,150+stageMarginLeft], so that axis starts at screen x-coordinate stageMarginLeft (20) of the parent element.

Upvotes: 1

Related Questions