- Expert Data Visualization
- Jos Dirksen
- 254字
- 2021-07-09 18:22:46
Create the background donut
The final setup we need to do before connecting the loaded data to arc segments is setting up the gray donut you see when the first data is loaded. For this, we use the d3.arc() function:
var arc = d3.arc()
.outerRadius(height/2 * 0.6)
.innerRadius(height/2 * 0.3);
// add a grey background arc
pieContainer.append('path')
.attr("class", 'backgroundArc')
.attr("d", arc({startAngle: 0, endAngle: 2 * Math.PI}));
The d3.arc() function isn't an SVG element we can add to the page, but it is a generator. A generator is a function that, when called, returns a path string that we can then add to a path element. Besides a generator for arc segments, D3 also provides generators for lots of other structures, as we'll see throughout this book. In this case, the generator allows us to create donut or pie segments as SVG paths that we can add. In the previous code, we used this to create a full donut: arc({startAngle: 0, endAngle: 2 * Math.PI}). Note that we've also could have specified these two properties when we called d3.arc() to create the generator. The following properties and functions are available on the d3.arc() function:

Finally, let's add some CSS for this arc, and a nice border around the main container:
.backgroundArc {
fill: #ddd;
}
.chart {
margin: 10px;
border-radius: 5px;
border: solid #555555 thin;
background-color: #eee;
}
We have our basic setup, which at this point looks like this:

Not very exciting yet, so let's add the colored segments that make up the donut.
- DevOps with Kubernetes
- GeoServer Cookbook
- Microsoft Application Virtualization Cookbook
- Building a Home Security System with Raspberry Pi
- Banana Pi Cookbook
- Modern JavaScript Applications
- UML 基礎與 Rose 建模案例(第3版)
- Getting Started with Hazelcast(Second Edition)
- Multithreading in C# 5.0 Cookbook
- Java語言程序設計教程
- Clojure for Machine Learning
- Visual Basic程序設計(第三版)
- Visual Basic程序設計全程指南
- HTML5游戲開發實戰
- 青少年Python趣味編程