我已经开始研究 D3.js 和 Dimple.js。我们的要求是创建一个双 x 轴的线图。对这个要求进行基础研究后,我发现 D3.js 或 Dimple.js 支持双 y 轴但不支持双 x 轴。
我的第一个问题是“D3.js 或 Dimple.js 是否支持像盒子模型那样的双 x 轴?”。
最佳答案
D3 已经支持双 x 轴。您可以根据需要多次调用 d3.svg.axis() 创建任意多条轴线。您需要通过 transform="translate(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”和“bottom”,这样它们就不会进入图区。
关于html - SVG 中线图的双 x 轴,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33233847/