# arc生成器与chord生成器在chord布局中的使用详解

本文链接：https://blog.youkuaiyun.com/qq_31396185/article/details/78146969

本文详细介绍了d3.js中的arc生成器和chord生成器，以及它们在chord布局中的应用。arc生成器用于创建弧形路径，而chord生成器则用于生成弦和弧的路径数据。通过结合chord布局，可以方便快捷地绘制复杂的图形。文中通过代码示例解释了如何使用这些生成器，并展示了pie布局的概念，以及如何生成和使用arc和chord数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先我们先来解释下arc生成器与chord生成器，其实所谓的生成器其实都是路径生成器的一种，在svg中有个标签元素，<path d=”“> </path>,我们发现有个d属性需要我们填写，我们当然可以自己填写，比如M0,0L1,1L2,2这些，但是这只是线段，如果弧，弦这种呢？根本就没法写，况且就算由点连成的线段写起来也很麻烦，与是d3给我们写了一个这样一系列函数，用来专门生成我们想要的图形路径字符串，这样很方便了有没有呢！！
路径生成器的种类有：line，arc，chord，area,diagonal,用法都很类似，学会了一个那么其他就很容易接受了。我们这一次主要讲arc，与chord

[ ] arc生成器

先看下代码，试着理解下

/*弧生成器 生成扇形一般用法*/
var width=200,height=200;
var data = [
                {startAngle:0,endAngle:2*Math.PI/3},
                {startAngle:2*Math.PI/3,endAngle:4*Math.PI/3},
                {startAngle:4*Math.PI/3,endAngle:2*Math.PI}  
            ];
//arc生成器对象
var arc = d3.svg.arc()
                  .innerRadius(0)  //定义内径
                  .outerRadius(90)//定义外径

//svg容器
var svg = d3.select("body").append("svg")
                                    .attr("width",width)
                                    .attr("height",height);

//颜色比例尺
var color=d3.scale.category10();

//把path放到容器中，并给d赋属性
var arcGraph = svg.selectAll("g .arc")
                    .data(data)
                    .enter()
                    .append("g")
                    .attr("class","arc")
                    .append("path")
                    .attr("d",function(d){
                        return arc(d);    //arc对象包裹数据进去
                    })
                    .attr("stroke","white")
                    .attr("stroke-width",2)
                    .attr("fill",function(d,i){
                        return color(i);
                    })
                    .attr("transform","translate(100,100)");
    svg.append("g")
        .selectAll("text")
        .data(data)
        .enter()
        .append("text")
        .attr("transform",function(d){
            return "translate("+width/2+","+height/2+")"+
                   "translate("+arc.centroid(d)+")";    //取得arc路径的圆心

        })
        .attr("text-anchor","middle")
        .attr("fill","black")