d3 - 根据最大数据数创建行答案

【问题标题】：d3 - create lines based on max count of datad3 - 根据最大数据数创建行
【发布时间】：2013-12-09 12:59:13
【问题描述】：

这是使用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

数据：

时间，计数 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

【问题讨论】：

您能否验证文件是否正在加载？尝试使用 console.log(data) 输出数据，因此验证数据是否通过。另一件事是将 padding*i 更改为 function(d,i){ return padding * i;}
我收到了这个错误Uncaught TypeError: Cannot read property 'length' of null
这意味着您无法读取该文件。因此，数据为空..

标签： javascript d3.js nvd3.js

【解决方案1】：

看起来问题在于您的代码中没有定义i。你可以做的是：

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

与：

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

【讨论】：

如何使用数据中的time 将 x 轴添加到此行。我希望间隔 30 分钟。
查看 d3 教程。 stackoverflow.com 本身就有大量这样的例子。