D3.js 弦生成器(V3版本)

弦生成器(Chord Generator)

 

弦生成器(Chord Generator)根据两段弧来绘制弦，共有五个访问器，分别为source()、target()、radius()、startAngle()、endAngle()，默认都返回与函数名称相同的变量。如果都使用默认的访问器，则要绘制一段弧，其数据组成应该形如:

 

 　　{
            source:{
                startAngle : 0.2,
                endAngle : Math.PI * 0.3,
                radius : 100
            },
            target:{
                startAngle :Math.PI * 1.0,
                endAngle : Math.PI * 1.6,
                radius : 100
            }
        }

其中，source为其实弧，target是终止弧。而startAngle、endAngle、radius则分别是弧的起始角度、终止角度和半径。也可以更改访问器，使变量具有别的名称，或者使用常量。例如:

 

　　　　var chord = d3.svg.chord()
                    .source(function(d){return d.startArc})
                    .target(function(d){return d.endArc})
                    .radius(200)
                    .startAngle(function(d){return d.start})
                    .endAngle(function(d){return d.end})

这段代码中，先生成器的起始弧被设定为startArc,终止弧为endArc，半径为常量200，起始角度为start、终止角度为end。因此，数据格式需要修改为:

 

　　{
            startArc:{
                start : 0.2,
                end : Math.PI * 0.3,
                radius : 100
            },
            endArc:{
                start :Math.PI * 1.0,
                end : Math.PI * 1.6,
                radius : 100
            }
        }

如果应用上面定义的弦生成器，由于半径的访问器被设置为常量，因此数据中不必再有半径。

 

弦生成器的五个访问器所代表参数的意义如图:  弦生成器由两段弧连接而成，右上角的source弧带有三个参数，左下角的target带有三个参数。

 

 

 

接下来绘制一段弦。先定义数据，再定义一个弦生成器，访问器全部使用默认的。然后在svg中添加路径，再以数据作为生成器的参数返回路径字符串。代码:

 

        var width = 600;
        var height = 400;

        var svg = d3.select("#body")
                    .append("svg")
                    .attr("width",width)
                    .attr("height",height)

       var dataList = {
            source:{
                startAngle : 0.2,
                endAngle : Math.PI * 0.3,
                radius : 100
            },
            target:{
                startAngle :Math.PI * 1.0,
                endAngle : Math.PI * 1.6,
                radius : 100
            }
        }


        //创建一个弦生成器
        var chord = d3.svg.chord();

        //添加路径
        svg.append("path")
            .attr("d",chord(dataList))
            .attr("transform","translate(200,200)")
            .attr("fill","yellow")
            .attr("stroke","black")
            .attr("stroke-width","3px")

 

效果图如下:

 

 

 

弦生成器可用于制作弦图，以后会为大家详细介绍。