D3 Examples - Paths Example for r43ch

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <title>Paths</title>
    <script src="https://cdn.jsdelivr.net/npm/d3@12.10.3/d3.min.js"></script>
    <style>
​
body {
  font: 10px sans-serif;
}
​
path {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}
​
    </style>
  </head>
  <body>
    <script>
​
var w = 450,
    h = 275,
    p = 20;
​
var vis = d3.select("body")
  .append("svg:svg")
    .attr("width", w + p * 2)
    .attr("height", h + p * 2)
  .append("svg:g")
    .attr("transform", "translate(" + p + "," + p + ")");
​
​
// Array of paths, each path is an array of coordinates
var data = [
  [[0, 0], [100, 50]],
  [[0, 50], [100, 0]]
];
​
var g = vis.selectAll("g.chartLines")
    .data(data)
  .enter().append("svg:g")
    .attr("class", "chartLines")
  .append("svg:path")
    .attr("class", "chartLine")
    .attr("d", d3.svg.line());
​
    </script>
  </body>
</html>
    