Question

如http://bl.ocks.org/cgdnorth/7144137中的示例所示，我希望将创建的每个箱图转换为与其对应的月份。我知道我可以在创建它们时移动.attr("transform...中的每个箱图：

svg.selectAll(".box")
                    .data(data)
                    .enter().append("svg")
                    .attr("class", "box")
                    .attr("width", width + margin.left + margin.right)
                    .attr("height", height + margin.bottom + margin.top)
                    .append("g")
                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")") // Need to translate each boxplot by e from data[e] in the csv.foreach
                    .call(chart);

我想知道如何访问data中定义的循环数据的e键值csv.forEach(function(x) {，以便我可以乘以框的宽度，如：< / p>

svg.selectAll(".box")
                    .data(data)
                    .enter().append("svg")
                    .attr("class", "box")
                    .attr("width", width + margin.left + margin.right)
                    .attr("height", height + margin.bottom + margin.top)
                    .append("g")
                    .attr("transform", "translate(" + (width + margin.left + margin.right)*e + "," + margin.top + ")") // Need to translate each boxplot by e from data[e] in the csv.foreach
                    .call(chart);

这也是用于绘制每个箱形图的数组键。谢谢！

Answer 1

使用函数作为第二个attr（）函数参数。此函数将为连接数据中的每个数据元素传递第n个数据元素。

.attr("transform",function(d,i){
    var xtransform = findMyXCoordinate(d,i);
    // for this value, you probably want to use 
    // margin.left + x(d)
    // where x is the d3.time.scale() function
    return "translate(" + xtransform+ "," + margin.top + ")") 
})

另请参阅This article，其中显示了如何轻松处理带边距的坐标空间。

Answer 2

看起来e只是数据数组的索引，因此您应该能够使用在selection.attr函数中为您提供的索引d3：

.attr("transform", function(d, i) {
    return "translate(" + (width + margin.left + margin.right)*i + "," + margin.top + ")";
});

注意我已将您的e更改为i。

d3.js循环数作为变量

2 个答案: