0

与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键值，以便我可以乘以框的宽度，例如：ecsv.forEach(function(x) {

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

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

4

2 回答 2

0

使用函数作为第二个 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 + ")") 
})

另请参阅这篇文章，它展示了如何轻松处理带边距的坐标空间。

于 2013-10-24T21:22:21.300 回答
0

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

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

请注意，我将您的更改e为i.

于 2013-10-24T21:27:45.097 回答