d3 - 畫線次數

Question

我有一條垂直線，使用d3繪製。假設我想像條形碼一樣重複幾次。我該怎麼做？

我知道它必須使用for來完成，但我沒有任何線索如何做到這一點。

建議將非常有幫助。

FIDDLE

下面的代碼：

 
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) 

在此先感謝。

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的方式做這將是各行（要素），其寬度（數據），然後使用D3的enter相結合構建它們。

此外，對於條形碼，您還需要將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; 
    })