Question

有没有办法确保在d3.js中始终在左侧绘制y轴？如果没有负值，则默认情况下会发生这种情况。我正在寻找一种方法将y轴放在左边，即使它有负值。这可能看起来很奇怪，但我需要创建的图表类型是必需的。

我正在尝试调整此边际消减成本曲线（MACC）d3示例，以显示左侧的y轴，尽管具有负值。我试图使用axis.orient并将其设置为left。 MACC代码是开源的，可在此处https://github.com/tamc/macc

获取

由于

Answer 1

可以使用其属性配置

D3 axis。请查看链接，以便更好地了解实施

与d3.scale相关联的d3轴
按范围以像素为单位对视域编码进行可视化编码。
轴的长度始终在范围内。

要在不考虑域的情况下获得负值，请在比例域中设置默认的负最小值。通过提供此功能，您可以使轴始终以负值开始。

＆＃13;

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()
	.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)

＆＃13;

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

＆＃13;

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

＆＃13;

在d3左侧显示y轴

1 个答案: