d3 - 최대 데이터 수를 기반으로 라인을 만듭니다.

Question

인스턴스 수를 수동으로 정의한 루프에 대해 d3을 사용하여 일련의 라인을 생성합니다. 일부 행이 n 인 외부 데이터가 있다고 가정합니다. 그리고 나는 그 많은 행을위한 선을 만들고 싶습니다.

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

으로 : 단일 선 (선에 대응 data 배열의 요소)

i 인덱스 인에 부착 된 데이터를 되

• ddata 배열에있는 요소의