用于SVG中线图的双x轴

时间:2015-10-20 10:11:25

标签: html5 d3.js svg charts dimple.js

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

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

1 个答案:

答案 0 :(得分:5)

D3确实支持双x轴。您可以根据需要多次调用d3.svg.axis()来创建多个轴线。您需要通过transform ="翻译(0,<某些值>"因此它们不会重叠来定位它们。

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);

这里有一个example d3 graph,有两个x轴,一个在顶部,一个在底部。

如果你想要在页面顶部和页面底部有一个x轴,你可能想要设置axis.orient和" top"和"底部"分别为每个人进入图表区域。