d3 - 根据最大​​数据计数创建行

Question

这是使用d3 for循环创建的一系列行，其中手动定义了实例数。假设我有一些行数为n的外部数据。我想为那些行创建行。

使用for循环创建的行：

var height = 200;
var width = 1000;
var count = 50, padding = 11;
var svgContianer = d3.select(".spectrum")
                        .append("svg")
                        .attr("class", "g")
                        .attr("width", width)
                        .attr("height", height)

for(var i = 0; i < count; ++i) {
    var line = svgContianer.append("line")
                            .attr("x1", padding*i)
                            .attr("x2", padding*i)
                            .attr("y1", 90)
                            .attr("y2", 25)
                            .attr("stroke", "#555")
                            .attr("stroke-width", 10)

}

但是当我像这样使用它时。它没有用。

var height = 200;
var width = 1000;
var count = 50, padding = 11;
var svgContianer = d3.select(".spectrum")
                        .append("svg")
                        .attr("class", "g")
                        .attr("width", width)
                        .attr("height", height)


d3.csv("data2.csv", function(data, error) {

    var line = svgContianer.selectAll("line")
                            .data(data)
                            .enter()
                            .append("line")
                            .attr("x1", padding*i)
                            .attr("x2", padding*i)
                            .attr("y1", 90)
                            .attr("y2", 25)
                            .attr("stroke", "#555")
                            .attr("stroke-width", 10)
                            .on("mouseover", movein)
                            .on("mouseout", moveout)

})

有人帮助创建外部数据中行数的行。

FIDDLE

数据：

time,count
00:12,1
00:45,1
01:14,1
01:30,1
01:57,1
02:21,1
02:44,1
02:50,1
03:13,1
03:41,1
03:59,1
04:10,1
04:23,1
04:45,1
04:59,1
05:01,1
05:17,1
05:48,1
06:00,1
06:11,1
06:23,1
06:31,1
06:47,1
07:12,1
07:29,1
07:41,1
07:58,1

Answer 1

看起来问题是你的代码中没有定义i。 你能做的是：

.attr("x1", function(d,i){return padding*i})

使用：

• d是附加到单行的数据（与该行对应的data数组的元素）
• i是data数组中元素的索引。