d3 chapter2-图表库

1、圆形

（cx，cy）圆心点坐标，r：半径

 

//    代码画圆----粉色的圆形

    // create svg element:

    var svg = d3.select("#circle").append("svg").attr("width", 200).attr("height", 200)

    // Add the path using this helper function

    svg.append('circle')

      .attr('cx', 100)

      .attr('cy', 100)

      .attr('r', 50)

      .attr('stroke', 'black')

      .attr('fill', 'pink');

2、方形

    // create svg element:

    var svg = d3.select("#rect").append("svg").attr("width", 800).attr("height", 200)

    // Add the path using this helper function

    svg.append('rect')

      .attr('x', 10)

      .attr('y', 60)

      .attr('width', 600)

      .attr('height', 40)

      .attr('stroke', 'black')

      .attr('fill', 'pink');

 

   

      y = "20"

      width = "60"

      height = "60"

      fill = "green"

      >

   

   

// translate

    var group = d3.select("#svgcontainer g")   
      .attr("transform", "translate(60, 60) rotate(30)");

3、画线

4、文本

//    代码也跟之前一样的结构，用 attr方法赋值： attr(属性名, 属性值) 

I'm a piece of text

5、路径(折线和曲线)

    var lineFunc = d3.line()

      .curve(d3.curveBasis)     // 上面图片的代码只加此行，直线路径变曲线

      .x(function(d) { return d.x })

      .y(function(d) { return d.y })

6、面积图

 

7、弧形

    style="fill: #69b3a2"

    stroke="black"

    transform="translate(400,200)"

    d="M0,149 A150,150,0,0,1,-0.47,-149.9 L-0.3,-99.9 A100,100,0,0,0,0.15,99.9Z">

 

图表库：https://d3-graph-gallery.com/index.html

热力图：https://d3-graph-gallery.com/heatmap.html

图表下载：https://github.com/holtzy/D3-graph-gallery