d3 - 선을 n 번 그립니다.

Question

저는 d3을 사용하여 그려지는 세로선이 있습니다. 바코드처럼 여러 번 반복 해보고 싶다고합시다. 어떻게해야합니까?

나는 그것이 for을 사용하여 완료되어야한다는 것을 알고 있지만 어떻게해야하는지 전혀 모른다.

제안 사항은 매우 유용합니다. 사전에

 
var height = 500; 
    var width = 500; 

    var svgContianer = d3.select("body") 
         .append("svg") 
         .attr("width", width) 
         .attr("height", height) 


    var line = svgContianer.append("line") 
          .attr("x1", 20) 
          .attr("x2", 20) 
          .attr("y1", 100) 
          .attr("y2", 0) 
          .attr("stroke", "#000") 
          .attr("stroke-width", 2) 

감사 :

FIDDLE

여기에 코드입니다.

Answer 1

for 루프를 사용하는 것보다 더 좋은 옵션이 있습니다. 그러나, 어떤 경우에 here you go

var height = 500; 
var width = 500; 
var count = 10, padding = 5; 
var svgContianer = d3.select("body") 
         .append("svg") 
         .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", 100) 
          .attr("y2", 0) 
          .attr("stroke", "#000") 
          .attr("stroke-width", 2) 
} 

Answer 2

는 바코드, 그것의 폭 (데이터) 다음에 D3의 enter 단계를 사용하여 각 행 (요소)를 결합하는 것입니다 할 수있는 D3 방법을 만들려면 그들을 구성하십시오.

또한 바코드의 경우 shape-rendering을 crispEdges으로 설정하는 것이 좋습니다.

Demo.

var height = 500; 
var width = 500; 

var svgContianer = d3.select("body") 
    .append("svg") 
    .attr("width", width) 
    .attr("height", height) 


var line = svgContianer.selectAll("line") 
    .data([1, 2, 1, 3, 2, 1, 3, 2, 1, 3, 2, 4, 3, 1, 2, 2, 2, 1, 3, 2]) 
    .enter() 
    .append("line") 
    .attr("x1", function (d, i) { 
     return 20 + 5 * i; 
    }) 
    .attr("x2", function (d, i) { 
     return 20 + 5 * i; 
    }) 
    .attr("y1", 100) 
    .attr("y2", 0) 
    .attr("stroke", "#000") 
    .attr("stroke-width", function (d) { 
     return d; 
    })