d3 chapter2-图表库

1、圆形

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

<svg>

  <circle style="fill: #69b3a2" stroke="black" cx=100 cy=100 r=40></circle>

</svg>

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

<div style="background-color: #fff;" id="circle"></div>

    // 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、方形

<rect style="fill: #69b3a2" stroke="black" x=20 y=40, width=300 height=40></rect>

    // 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');

<svg width = "300" height = "300">

  <g transform = "translate(60,60) rotate(45)">

    <rect x = "20"

      y = "20"

      width = "60"

      height = "60"

      fill = "green"

      >

    </rect>

    </g>

</svg>

// translate

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

3、画线

<line stroke="red" x0=10 y0=10, x1=500 y1=100></line>

4、文本

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

<text stroke="green" style="font-size: 19px" x=100 y=50>I'm a piece of text</text>

5、路径(折线和曲线)

<path style="fill: none" stroke="black" d="M0 20 L150 150 L300 100 L450 20 L600 130"></path>

    var lineFunc = d3.line()

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

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

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

6、面积图

  <path style="fill: cyan" stroke="black" d="M0 200 L0 20 L150 150 L300 100 L450 20 L600 130 L600 200"></path>

7、弧形

<path

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

  </path>

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

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

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