SVG 中线图的双 x 轴 [英] Dual x-axes for line-graphs in SVG

问题描述

我已经开始研究 D3.js 和 Dimple.js.我们的要求是创建一个具有双 x 轴的折线图.对此需求进行基础研究后，我发现 D3.js 或 Dimple.js 支持双 y 轴但不支持双 x 轴.

I have started to work on D3.js and Dimple.js. Our requirement is to create a line-graph with dual x-axes. Post basic research on this requirement, I found that D3.js or Dimple.js supports dual y-axes but not dual x-axes.

我的第一个问题是D3.js 或 Dimple.js 是否支持像盒模型那样的双 x 轴?".

My first question is "Does D3.js or Dimple.js support dual x-axes like box model?".

推荐答案

D3 已经支持双 x 轴.您可以根据需要多次调用 d3.svg.axis() 来创建尽可能多的轴线.您需要通过 transform="translate(0, <some value>" 来定位它们，以免它们重叠.

D3 does support dual x-axes already. You can call d3.svg.axis() as many times as you want to create as many axes lines as you want. You'll need to position them via transform="translate(0, <some value>" so they don't overlap.

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var xAxis2 = d3.svg.axis()
    .scale(x)
    .orient("top");

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0, 0)")
      .call(xAxis2);

这是一个 示例 d3 图，带有两个 x 轴，一个在顶部，一个在底部底部.

Here's an example d3 graph with two x-axes, one at the top and one at the bottom.

如果你想在页面顶部和页面底部有一个 x 轴，你可能需要分别为每个轴设置顶部"和底部"，这样它们就不会进入图形区域.

If you want an x-axis at the top of the page and bottom of the page you'll probably want to set axis.orient with "top" and "bottom" for each respectively so they don't go into the graph area.

这篇关于SVG 中线图的双 x 轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！