dvd3js:adding_quantitative_scales

adding quantitative scales

→ github.com/mbostock/d3/wiki/Scales

Trois types d'échelles :

  • Échelles quantitatives - pour les domaines non continus d'entrées, comme les nombres
    • linear (plus courante)
    • identity
    • power
    • log
    • quantize
    • threshold
  • Échelles ordinales - pour les domaines discrets d'entrées, comme les noms ou catégories
  • Échelles temporelles - pour les domaines temporels
var bardata = [20, 30, 600, 15, 85, 20, 30, 105, 15, 85, 20, 30, 105, 15, 85];

var height = 400;
var width = 600;
var barWidth = 50;
var barOffset = 5;

// linear scale
var yScale = d3.scale.linear()
  .domain([0, d3.max(bardata)])
  .range([0, height]);

// ordinal scale
var xScale = d3.scale.ordinal()
  .domain(d3.range(0,bardata.length))
  .rangeBands([0, width]);

d3.select('#chart').append('svg')
.attr('width', width)
.attr('height', height)
.style('background', '#C9D7D6')
.selectAll('rect').data(bardata)
.enter().append('rect')
  .style('fill', '#C61C6F')
  .attr('width', xScale.rangeBand())
  .attr('height', function (d) {
    return yScale(d);
  })
  .attr('x', function (d, i) {
    return xScale(i);
  })
  .attr('y', function (d) {
    return height - yScale(d);
  });
dvd3js/adding_quantitative_scales.txt · Last modified: 2016/04/14 17:14 by leo