Javascript d3js与node一起，如何在饼图中添加线条？

这里是d3js新手。我使用d3js在服务器上呈现svg。在阅读了一些教程后，我得出了以下结论：

var fs = require('fs');
var d3 = require('d3');
var jsdom = require('jsdom');
var _ = require("underscore");
var chartWidth = 500, chartHeight = 500;

var arc = d3.svg.arc()
    .outerRadius(chartWidth/2 - 10)
    .innerRadius(0);

var colours = ['#98abc5','#8a89a6','#7b6888','#6b486b','#a05d56',"#d0743c", "#ff8c00"];

var pieData = [ 
    {
        "category" : "Category A",
        "amount" : 300
    },
    {
        "category" : "Category B",
        "amount" : 300
    }
];

makePie( pieData );

function makePie( pieData, outputLocation ){
    var amount = _.pluck( pieData, "amount" ); 
    var category = _.pluck( pieData, "category" );

    jsdom.env({
        html:'',
        features:{ QuerySelector:true }, //you need query selector for D3 to work
        done:function(errors, window){
            window.d3 = d3.select(window.document); //get d3 into the dom

            //do yr normal d3 stuff
            var svg = window.d3.select('body')
                .append('div')
                    .attr('class','container') //make a container div to ease the saving process
                .append('svg')
                    .attr({
                        xmlns:'http://www.w3.org/2000/svg',
                        width:chartWidth,
                        height:chartHeight
                    })
                .append('g')
                    .attr('transform','translate(' + chartWidth/2 + ',' + chartWidth/2 + ')');

            svg.selectAll('.arc')
                .data( d3.layout.pie()(amount) )
                    .enter()
                .append('path')
                    .attr({
                        'class':'arc',
                        'd':arc,
                        'fill':function(d,i){
                            return colours[i];
                        },
                        'stroke':'#fff'
                    });
            //write out the children of the container div
            fs.writeFileSync("test.svg", window.d3.select('.container').html()) //using sync to keep the code simple

        }
    });
}  

虽然这会呈现SVG图表，但我不知道如何在图表中添加线条，以显示哪个切片属于哪个类别

如何操作？

编辑/更新（注意：由“thudfactor”编写）-这是添加标签/行的方法

var数据=[{
标签：“星球大战”，
实例：207
}, {
标签：“迷失在太空”，
实例：3
}, {
标签：“波士顿流行音乐”，
实例：20
}, {
标签：“印第安纳琼斯”，
实例：150
}, {
标签：“哈利波特”，
实例：75
}, {
标签：“大白鲨”，
实例：5
}, {
标签：“林肯”，
实例：1
}];
svg=d3。选择（“svg”）；
画布=d3。选择（“画布”）；
艺术=d3.选择（“艺术”）；
标签=d3。选择（“#标签”）；
//创建饼图布局函数。
//此功能将增加便利性
//数据转换为现有数据，如
//开始角和结束角
//对于每个数据元素。
jhw_pie=d3.layout.pie（）
jhw_饼图值（函数（d，i）{
//告诉布局函数什么
//将数据对象的属性设置为
//用作值。
返回d.instances；
});
//存储我们的图表尺寸
cDim={
身高：500，
宽度：500，
内半径：50，
外层：150，
唇瓣半径：175
}
//设置SVG元素的大小
svg.attr({
高度：cDim.height，
宽度：cDim.width
});
//此“平移”特性移动组坐标的原点
//空间到SVG元素的中心，节省了我们每次翻译的时间
//单独协调。
attr（“transform”、“translate”（+（cDim.width/2）+）、“+（cDim.width/2）+”）；
pied_data=jhw_pie（数据）；
//我们在这里制作的pied_弧函数将计算路径
//基于数据集的每个楔块的信息。这是
//在“d”属性中使用。
pied_arc=d3.svg.arc（）
.内半径（50）
.外层（150）；
//这是返回10种预定义颜色的有序比例。
//它是d3核心的一部分。
pied_colors=d3.scale.category10（）；
//让我们开始画弧。
输入ars=art.selectAll（“.wedge”）.data（pied_数据）。输入（）；
输入arcs.append（“路径”）
.attr（“类”、“楔块”）
.attr（“d”，分弧）
.样式（“填充”，功能（d，i）{
返回彩色（i）；
});
//现在我们来画标签线，等等。
enteringLabels=labels。选择All（“.label”）.data（pied_数据）。输入（）；
labelGroups=输入labels.append（“g”）.attr（“class”，“label”）；
labelGroups.append（“圆圈”）.attr({
x:0,，
y:0，
r:2，
填写：#000，
变换：函数（d，i）{
形心=分弧形心（d）；
返回“平移（“+pied_弧形心（d）+”）；
},
“类”：“标签圈”
});
//“我什么时候才能用这个？”我在一个房间里说
//十年级三年级。
textLines=labelGroups.append（“line”）.attr({
x1：功能（d，i）{
返回点弧形心（d）[0]；
},
y1：功能（d，i）{
返回点弧形心（d）[1]；
},
x2：功能（d，i）{
形心=分弧形心（d）；
midAngle=Math.atan2（质心[1]，质心[0]）；
x=数学cos（midAngle）*cDim.labelRadius；
返回x；
},
y2：功能（d，i）{
形心=分弧形心（d）；
midAngle=Math.atan2（质心[1]，质心[0]）；
y=数学sin（中间角）*cDim.labelRadius；
返回y；
},
“类”：“标签行”
});
textLabels=labelGroups.append（“text”）.attr({
x：功能（d，i）{
形心=分弧形心（d）；
midAngle=Math.atan2（质心[1]，质心[0]）；
x=数学cos（midAngle）*cDim.labelRadius；
符号=（x>0）？1:-1
labelX=x+（5*符号）
返回标签；
},
y：函数（d，i）{
形心=分弧形心（d）；
midAngle=Math.atan2（质心[1]，质心[0]）；
y=数学sin（中间角）*cDim.labelRadius；
返回y；
},
“文本锚定”：函数（d，i）{
形心=分弧形心（d）；
midAngle=Math.atan2（质心[1]，质心[0]）；
x=数学cos（midAngle）*cDim.labelRadius；
返回（x>0）？“开始”：“结束”；
},
“类”：“标签文本”
}).文本（功能（d）{
返回d.data.label
});
α=0.5；
间距=12；
函数relax（）{
再次=假；
文本标签。每个（函数（d，i）{
a=这个；
da=d3。选择（a）；
y1=日属性（“y”）；
文本标签。每个（函数（d，j）{
b=这个；
//a和b是相同的元素，不会发生碰撞。
如果（a==b）返回；
db=d3。选择（b）；
//a&b位于图表的两侧，而
//不要碰撞
如果（da.attr（“文本锚”）！=db.attr（“文本锚”））返回；
//现在让我们计算一下
//这些元素。
y2=db.attr（“y”）；
deltaY=y1-y2；
//我们的间距大于我们指定的间距，
//所以它们不会碰撞。
if（Math.abs（deltaY）>间距）返回；
//如果标签发生碰撞，我们将推动每个标签
//两个标签上下移动一点。
再次=正确；
符号=三角洲>0？1:-1；
调整=符号*α；
da.属性（“y”、+y1+调整）；
db.attr（“y”+y2-调整）；
});
});
//在这里调整我们的领队
//这样他们就能跟着标签走了。
如果（再次）{
Labelements=textLabels[0]；
textLines.attr（“y2”，函数（d，i）{
labelForLine=d3.select（labelements[i]）；
返回labelForLine.attr（“y”）；
});
设置超时（放松，20）
}
}
放松（）
。标签文本{
路线基线：中间；
字体大小：12px；
字体系列：arial，helvetica，“无衬线”；
填充：#39393