D3 Examples - multi-line chart 1

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
 
<head>
​
  <meta charset="utf-8">
​
  <script src="https://d3js.org/d3.v4.min.js"></script>
​
  <style>
  /* add style to elements */
  </style>
​
<!-- 1. Create a Canvas -->
  <svg width="960" height="500"></svg>
<!-- test -->
​
</head>
​
​
​
<body>
​
  <script>
// 2. find a start point for drawing
​
// 2.1 select to manipulate
//   var svg = d3.select("svg");
    
// test 2.1
// console.log(svg);
​
    
    
    
// 2.2 define where to start
//   var margin = {top: 20, right: 80, bottom: 30, left: 50},
​
//       width = svg.attr("width") - margin.left - margin.right,
​
//       height = svg.attr("height") - margin.top - margin.bottom;
​
​
    
    
// 2.3 create a placeholder, move it to the place you want to start
//    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
​
// test 2.3 
// console.log(g);
// Element View
​
  </script>
​
</body>
​
</html>
​
    