d3.js v4 Symbols曲線添加符號

1.d3.symblo()html

  • d3提供的符號的生成器,原理是經過path畫出的形狀;git

  • d3提供了7種不一樣的的符號: circle, cross, diamond, square, star, triangle, and wye,以下圖;對應d3.symbols[n]n表明的0,1,2,3,4,5,6;github

clipboard.png

2.demoapp

  • 曲線圖標識案例,注意定位symbol的時候要使用translatedom

    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")
  • 源碼:https://github.com/HK-Kevin/d...spa

  • demo:https://hk-kevin.github.io/d3...code

相關文章
相關標籤/搜索