zoukankan      html  css  js  c++  java
  • 符号生成器

    符号生成器→d3.symbol,它构造出的函数用于生成一系列符号路径字符串(path标签的d属性值)

    数据格式

    一个数组即可,因为它们的形状都是固定的,数组的值其实都是没用的,用的只是数组的长度,生成那么多个符号。
    1. var data = d3.range(300)
    表示要生成300个符号。

    构造器

    最简的形式就是
    1. var symbol = d3.symbol();
    但是通常我们还想控制它绘出的什么形状,以及形状的大小。d3提供了circle, cross, diamond, square, star, triangle wye等7中形状,它们是d3.symbols数组的元素。
    因此我们可以构建出如下的构造器:
    1. var symbol = d3.symbol()
    2. .type(function () {return d3.symbols[~~(Math.random()*d3.symbols.length)];})
    3. .size(function (d, i) {return ~~(Math.random()*i);})
    上面的构造器,我们定义的type为随机的,在这7个形状中来选择一个,大小也是随机的。然后我们就可以用这个构造器来绘制,这300个图形了:
    1. d3.select("svg").selectAll("path")
    2. .data(data).enter().append("path")
    3. .attr("transform",function (d) {
    4. return "translate("+Math.random() * 600+100+","+Math.random() * 400+100+")";})
    5. .attr("d",symbol)
    6. .attr("stroke",function(d,i){return color(i);})
    7. .attr("stroke-width",2)
    8. .attr("fill","none");
  • 相关阅读:
    每周总结
    4月9日学习日志
    4月8日学习日志
    4月7日学习日志
    4月6日学习日志
    Cypress存取时间为10纳秒的异步SRAM
    超低功耗MCU如何降低功耗
    集成铁电存储器MCU为物联网应用提供出色性能
    读取优先和SRAM-MRAM混合结构
    磁阻式随机存储器MRAM基本原理
  • 原文地址:https://www.cnblogs.com/yaoyinglong/p/5911195.html
Copyright © 2011-2022 走看看