d3の左側にyaxisを表示

Question

d3.jsのy軸が常に左側に描画されるようにする方法はありますか？負の値がない場合、これはデフォルトで発生します。私は負の値があっても、左にy軸を配置する方法を探しています。これは奇妙に思えるかもしれませんが、私が作成する必要があるグラフのタイプに必要です。

私は負の値を持っていても左にy軸を表示するために、この限界減価曲線（MACC）d3の例を適用しようとしています。私はaxis.orientを使い、これを左に設定しようとしました。 MACCコードは

Answer 1

D3 axishttps://github.com/tamc/macc

おかげで、そのプロパティを使用して設定することができ、ここで、オープンソースと使用可能です。あなたが実装

• 視覚範囲ピクセルでエンコードするd3.scale
• スケール領域値に関連したD3の軸のためのより良いアイデアを得るだろうように、リンク上で見てください。
• 軸の長さは常に範囲内にあります。

ドメインに関係なく負の値を達成するには、スケールドメインでデフォルトの負の最小値を設定します。これを指定することで、軸を常に負の値で開始させることができます。

var margin = {top: 20, right: 20, bottom: 30, left: 50}, 
 
    width = 400-margin.left - margin.right, 
 
    height = 200-margin.top - margin.bottom; 
 

 
var y = d3.scale.linear() 
 
\t .domain([-10, 10]) 
 
    .range([height, 0]); 
 

 
var yAxis = d3.svg.axis() 
 
    .scale(y) 
 
    .orient("left"); 
 

 
var svg = d3.select("body").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 + ")"); 
 

 
    svg.append("g") 
 
    .attr("class", "y axis") 
 
    .call(yAxis)

.axis path, 
 
.axis line { 
 
    fill: none; 
 
    stroke: #000; 
 
    shape-rendering: crispEdges; 
 
}

<script src="https://d3js.org/d3.v3.min.js"></script>