D3 Examples - Kai drawing paths

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
path {
    stroke: #000;
    stroke-width: 1.5px;
  fill: none;
}
​
</style>
<body>
<script src="https://d3js.org/d3.v3.js"></script>
<script>
​
var w = 960,
    h = 500;
    
var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);
​
var xScale = d3.scale.linear()
    .range([0, w]);
​
var yScale = d3.scale.ordinal()
    .rangeRoundBands([0, h]);
​
var line = d3.svg.line()
    .x(function(d) { return xScale(d.tx); })
    .y(function(d) { return yScale(d.i); });
​
d3.tsv("sample.tsv", function(error, data) {
    xScale.domain([d3.min(data, function(d) { return d["txStart"]; }),
        d3.max(data, function(d) { return d["txEnd"]; })])
​
    yScale.domain(d3.range(data.length))
    
  var paths = svg.selectAll("path")
    .data(data.map(function(d,i) {
      return [
        { tx: d.txStart, i: i }, 
        { tx: d.txEnd, i: i } 
      ]
    }))
    .enter()
    .append("path")
    .attr("d", line)
    /*
    .attr("transform", function(d, i) {
      return "translate(0," + yScale(i) + ")";
    });
    */
​
});
​
</script>
​
    