Question

我正在尝试使用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; });

我知道我必须稍微改变一下转换属性，但我甚至无法显示轴。我认为问题出在.call(function(d, i) { return d.xAxis; })，但我无法弄清楚如何让它发挥作用。任何想法都会非常感激。

Answer 1

call方法无法为您提供d, i个参数。相反，它：

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

请参阅API文档：selection.call(function[, arguments…])

您可以尝试使用each代替。它：

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

请参阅API文档：selection.each(function)

这是一个代码示例：

.each(function (d, i) {
    return d.xAxis(d3.select(this));
});

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

1 个答案: