在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

回答

相关问题