D3js V4版本饼图

作者: 喵喵同学嘛 | 来源:发表于2019-05-12 20:12 被阅读0次

D3js V4版本饼图
D3js v4版本画散点图
D3js V4版本画柱状图
React中d3(v4)的饼状图绘制与数据更新
D3js创建饼图(svg)
webpack4迁移
如何使用v4版本styled-components的全局样式？
d3.event.transform不能用了
Android Studio：解决DataBinding v4包
webpack stats.toJson().modules[

简单的饼图，D3js v4版本画的，后续会更新一些复杂的例子，敬请关注
效果图：

代码：

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

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <script src="http://d3js.org/d3.v4.min.js"></script>
   <style>
       #container {
           margin: 0 auto;
       }
   </style>
</head>

<body>
   <div id="container" width="700" height="400"></div>
</body>

</html>
<script>
   let container = d3.select("#container")
   let width = container.attr("width")
   let height = container.attr("height")
   let padding = 30
   let datas = [
       { name: "java", value: 0.4 },
       { name: "html", value: 0.14 },
       { name: "javascript", value: 0.36 },
       { name: "python", value: 0.1 }
   ]
   let dataset = [50, 26, 18, 58, 48];
   let svg = d3.select("#container")
       .append("svg")
       .attr("width", width)
       .attr("height", height)
   let colorScale = d3.scaleOrdinal()
       .domain([0, datas.length])
       .range(d3.schemeCategory10)
   let pie = d3.pie()
   let innerR = 0
   let outR = 100
   let arc_generator = d3.arc()
       .innerRadius(innerR)
       .outerRadius(outR)
   let pieData = pie(dataset)

   let g = svg.selectAll("g")
       .data(pieData)
       .enter()
       .append("g")
       .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')
   g.append("path")
       .attr("d", d => arc_generator(d))
       .attr("fill", (d, i) => colorScale(i))
   g.append("text")
       .attr("transform", d => {
           return "translate(" + arc_generator.centroid(d) + ")";
       })
       .attr("text-anchor", "middle")
       .text(d => d.value)
</script>