如何通过数据连接将多个x轴添加到d3图表

how to add multiple x axes to d3 chart via data join?

本文关键字：添加 d3 图表 数据 何通过 连接      更新时间：2023-09-26

我试图在一次使用d3创建几个图表-代码在这里:http://jsfiddle.net/jgilfillan/W85ut/

我有一个包含这些对象的数组bulletDataX 

function BulletObject(name, actual, target, ranges, bulletWidth) {
 this.name = name;
    this.actual = actual;
    this.target = target;
    this.ranges = ranges;
    this.maxX = ranges[2];
    this.bulletWidth = bulletWidth;
    this.scale = d3.scale.linear().domain([0, this.maxX]).range([0, this.bulletWidth]);
    this.xAxis = d3.svg.axis().scale(this.scale).orient("bottom");
}

这是我试图让工作的代码…

//axes??? not working
svg.selectAll(".xaxis")
.data(bulletDataX)
.enter()
.append("g")
.attr("id", function(d) { return d.name; })
.attr("class", "x axis")
.attr("transform", function(d, i) { return  "translate(0, " + ((bulletHeight + bulletPadding) * i + .25 * bulletHeight).toString() + ")"; })
.call(function(d, i) { return d.xAxis; });

我知道我必须摆弄一下transform属性，但我甚至不能得到轴显示。我认为问题是与.call(function(d, i) { return d.xAxis; })，但我不知道如何让它的工作。

call方法不提供d, i参数。相反,它:

调用指定的函数一次，传入当前选择以及任何可选参数。

参见API文档:selection。函数调用([…],参数)

您可以尝试使用each代替。:

为当前元素中的每个元素调用指定的函数选择，传入当前数据d和索引i，并使用this当前DOM元素的上下文。

参见API文档:selection.each(function)

下面是一个代码示例:

.each(function (d, i) {
    return d.xAxis(d3.select(this));
});
相关文章：