首页 > 其他分享> > D3中的定量比例尺训练

D3中的定量比例尺训练

2020-03-01 19:56:26 作者：互联网

线性比例尺

指数比例尺

对数比例尺

量子比例尺

分位比例尺

阈值比例尺

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>D3</title>
</head>
<body style="background-color: #ffffff;">

</body>

<script src="d3.v3.min.js" charset="UTF-8"></script>
<script>
    var linear = d3.scale.linear()
      .domain([0, 500])
      .range([0, 100]);
    console.log(linear(50));
    console.log(linear(250));
    console.log(linear(450));
    console.log(linear.invert(90));
    console.log(linear.domain());
    console.log(linear.range());
    
    var pow = d3.scale.pow().exponent(3);
    console.log(pow(2));
    console.log(pow(3));
    
    var quantize = d3.scale.quantize()
      .domain([50, 0])
      .range(['#888', '#666', '#444', '#222', '#000']);
    var r = [45, 35, 25, 15, 5];
    var svg = d3.select("body").append("svg")
      .attr("width", 400)
      .attr("height", 400);
      
    svg.selectAll("circle")
      .data(r)
      .enter()
      .append("circle")
      .attr("cx", function(d, i) {
          return 50 + i * 30;
      })
      .attr("cy", 50)
      .attr("r", function(d) {
          return d;
      })
      .attr("fill", function(d) {
          return quantize(d);
      });
      
    var threshold = d3.scale.threshold()
      .domain([10, 20, 30])
      .range(['red', 'green', 'blue', 'black']);
      
    console.log(threshold(5));
    console.log(threshold(35));
</script>

标签：定量,console,linear,attr,var,比例尺,D3,log
来源： https://www.cnblogs.com/aguncn/p/12391536.html