Chord generator
The chord generator draws strings according to two arcs. There are five accessors, namely source(), target(), radius(), startAngle(), endAngle(), which return the same variables as the function name by default. If the default accessor is used, an arc is drawn, and its data composition should be as follows:
1 {
2 source:{
3 startAngle : 0.2,
4 endAngle : Math.PI * 0.3,
5 radius : 100
6 },
7 target:{
8 startAngle :Math.PI * 1.0,
9 endAngle : Math.PI * 1.6,
10 radius : 100
11 }
12 }
Where source is the actual arc and target is the ending arc. startAngle, endAngle and radius are the starting angle, ending angle and radius of the arc respectively. You can also change the accessor to have a different name for the variable, or use constants. For example:
1 var chord = d3.svg.chord()
2 .source(function(d){return d.startArc})
3 .target(function(d){return d.endArc})
4 .radius(200)
5 .startAngle(function(d){return d.start})
6 .endAngle(function(d){return d.end})
In this code, the start arc, the end arc, the radius of constant 200, the start angle and the end angle are set as startArc and endArc respectively. Therefore, the data format needs to be modified to:
1 {
2 startArc:{
3 start : 0.2,
4 end : Math.PI * 0.3,
5 radius : 100
6 },
7 endArc:{
8 start :Math.PI * 1.0,
9 end : Math.PI * 1.6,
10 radius : 100
11 }
12 }
If the string generator defined above is applied, there is no longer a radius in the data because the accessor of the radius is set to constant.
The meaning of the parameters represented by the five accessors of the string generator is shown in the figure: the string generator is composed of two arcs, the source arc in the upper right corner has three parameters, and the target in the lower left corner has three parameters.
Next, draw a string. First define the data, then define a string generator. All accessors use the default. Then add the path in svg, and return the path string with data as the parameter of generator. Code:
1 var width = 600;
2 var height = 400;
3
4 var svg = d3.select("#body")
5 .append("svg")
6 .attr("width",width)
7 .attr("height",height)
8
9 var dataList = {
10 source:{
11 startAngle : 0.2,
12 endAngle : Math.PI * 0.3,
13 radius : 100
14 },
15 target:{
16 startAngle :Math.PI * 1.0,
17 endAngle : Math.PI * 1.6,
18 radius : 100
19 }
20 }
21
22
23 //Create a string generator
24 var chord = d3.svg.chord();
25
26 //Add path
27 svg.append("path")
28 .attr("d",chord(dataList))
29 .attr("transform","translate(200,200)")
30 .attr("fill","yellow")
31 .attr("stroke","black")
32 .attr("stroke-width","3px")
The renderings are as follows:
The string generator can be used to make a string diagram, which will be introduced in detail later.