D3 Examples - DecemberCafeChap7

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    rectHeight = 25
    
    var svg2 = d3.select("body").append("svg")
      .attr("width", 300)
      .attr("height", 200)
​
    var dataset_2 = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ]
    
    var echelle2 = d3.scaleLinear().domain([d3.min(dataset_2), d3.max(dataset_2)]).range([0, 250])
    
    svg2.selectAll("rect").data(dataset_2).enter().append("rect").attr("x", 20)
        .attr("y", function(d, i){
      return (i+1)*rectHeight + 10
    })
        .attr("width", function(d){
      return echelle2(d)
    })
        .attr("height", rectHeight - 5)
        .attr("fill", "darkblue")
        
    // Les codes suivants des axes ne fonctionnent pas... 
//     svg2.append("g")
//      .attr("transform", "translate(0, 500)")
//          .call(d3.axisBottom(d3.scaleLinear().range([0, 250]))) 
    
    // Bizzare, mal fait
    var xAxe = d3.axisBottom(echelle2).ticks(7)
    svg2.append("g").attr("transform", "translate(20, 150)").call(xAxe)
    
    var yAxe = d3.axisLeft(d3.scaleLinear().range([0, 200])).ticks(5)
    svg2.append("g").attr("transform", "translate(290, 50)").call(yAxe)
    
  </script>
</body>
​
    