博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
d3.js v4 Symbols曲线添加符号
阅读量:5959 次
发布时间:2019-06-19

本文共 473 字,大约阅读时间需要 1 分钟。

1.d3.symblo()

  • d3提供的符号的生成器,原理是通过path画出的形状;

  • d3提供了7种不同的的符号: circle, cross, diamond, square, star, triangle, and wye,如下图;对应d3.symbols[n]n代表的0,1,2,3,4,5,6;

clipboard.png

2.demo

  • 曲线图标识案例,注意定位symbol的时候要使用translate

    let n = Math.round(Math.random()*6)  enterDot.append("path").attr("class","dot").attr("transform",function(d){return `translate(${xScale(d.x)},${yScale(d.y)})`}).attr("d",d3.symbol().type(function (d, i) {         return d3.symbols[n];}).size(200)).style("fill","green")
  • 源码:

  • demo:

转载地址:http://kkyax.baihongyu.com/

你可能感兴趣的文章