在d3左側顯示yax

有沒有辦法確保y軸始終在d3.js的左側繪製？如果沒有負值，則默認情況下會發生這種情況。我正在尋找一種方法將y軸放在左側，即使它有負值。這可能看起來很奇怪，但是我需要創建的圖形類型是必需的。在d3左側顯示yax

我正在嘗試修改這個邊際消減成本曲線（MACC）d3示例，以便在左側顯示y軸，儘管有負值。我試圖使用axis.orient並將其設置爲左側。的MACC代碼是開源和可用這裏https://github.com/tamc/macc

由於

2016-09-23 orbital

D3 axis可使用其屬性來配置。請在鏈接上一看，所以你會得到一個更好的主意實施

一起由範圍內的像素進行可視化編碼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>

來源

2016-09-23 06:35:58

在d3左側顯示yax

回答

相關問題