带交互饼图

作者: 江湖小盛 | 来源:发表于2023-04-13 10:58 被阅读0次

iOS BarChartView的使用，Charts版本3.2.
python绘制饼图-有负值
Echarts饼图之-玫瑰图数据交互
vue+elementUi+echarts 折线图组件
图表交互设计之饼图
iOS绘制“3D饼图”
PieChart方法记录
canvas画饼图(四) 饼图动画
璎珞小姐姐手把手教你实力撩汉
我男朋友那方面好棒啊啊啊！

<!DOCTYPE html>
<html lang="en">

<head>
  <title>d3</title>
  <script type="text/javascript" src="./d3@7.js"></script>
  <style type="text/css">
   
  </style>
</head>

<body>
<div id="chart"></svg>
  <script type="text/javascript"> 
    const width = 800
    const height = 500
    const radius = Math.min(width, height) / 2.5
    const donutWidth = 75
    const legendRectSize = 18
    const legendSpacing = 4

    const data = [
      { label: 'A', value: 50 },
      { label: 'B', value: 30 },
      { label: 'C', value: 20 },
      { label: 'D', value: 10 },
      { label: 'E', value: 5 }
    ]

    const svg = d3.select('#chart')
      .append('svg')
      .attr('width', width)
      .attr('height', height)
      .append('g')
      .attr('transform', `translate(${width / 2}, ${height / 2})`)

    const color = d3.scaleOrdinal(d3.schemeCategory10)

    const arc = d3.arc()
      .innerRadius(radius - donutWidth)
      .outerRadius(radius)

    const pie = d3.pie()
      .value(d => d.value)
      .sort(null)

    const path = svg.selectAll('path')
      .data(pie(data))
      .enter()
      .append('path')
      .attr('d', arc)
      .attr('fill', (d, i) => color(i))
      .on('mouseover', function (d) {
        d3.select(this).transition()
          .duration(200)
          .attr('d', d3.arc()
            .innerRadius(radius - donutWidth + 10)
            .outerRadius(radius + 10)
          )
      })
      .on('mouseout', function (d) {
        d3.select(this).transition()
          .duration(200)
          .attr('d', arc)
      })

    const text = svg.selectAll('text')
      .data(pie(data))
      .enter()
      .append('text')
      .attr('transform', d => `translate(${arc.centroid(d)})`)
      .attr('dy', '.35em')
      .text(d => d.data.label)
      .style('text-anchor', 'middle')

    const legend = svg.selectAll('.legend')
      .data(color.domain())
      .enter()
      .append('g')
      .attr('class', 'legend')
      .attr('transform', (d, i) => {
        const height = legendRectSize + legendSpacing
        const offset = height * color.domain().length / 2
        const horz = -2 * legendRectSize
        const vert = i * height - offset
        return `translate(${horz}, ${vert})`
      })

    legend.append('rect')
      .attr('width', legendRectSize)
      .attr('height', legendRectSize)
      .style('fill', color)
      .style('stroke', color)

    legend.append('text')
      .attr('x', legendRectSize + legendSpacing)
      .attr('y', legendRectSize - legendSpacing)
      .text(d => d)


  </script>
</body>

</html>

2.png