首页 > 其他分享> 文章详细

D3中的定量比例尺训练

2020-03-01 19:56:26 阅读：283 来源： 互联网

标签：定量 console linear attr var 比例尺 D3 log

线性比例尺

指数比例尺

对数比例尺

量子比例尺

分位比例尺

阈值比例尺

<!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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

D3中的定量比例尺训练