D3.js 条形图上的平均线

我对条形图和它的平均线有问题

平均线并不能覆盖所有的酒吧。最后一条没有平均线

我使用了d3js代码

var数据=[{
“会议”：“1”，
“分数”：70分
},
{
“会议”：“2”，
“得分”：30分
},
{
“会议”：“3”，
“分数”：50分
},
{
“会议”：“4”，
“分数”：60分
},
{
“会议”：“5”，
“分数”：40分
}
];
var保证金={
前20名，
右:20,，
底数：30，
左：40
},
宽度=480-margin.left-margin.right，
高度=250-margin.top-margin.bottom；
var x=d3.scale.ordinal（）
.rangeRoundBands（[0，宽度]，.1）；
var x2=d3.scale.ordinal（）
.范围带（[0，宽度]，0）；
变量y=d3.scale.linear（）
.范围（[高度，0]）；
var xAxis=d3.svg.axis（）
.比例（x）
.东方（“底部”）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
data.forEach（函数（d）{
d、 分数=+d.分数；
});
x、 域（data.map）（函数（d）{
返回d.session；
}));
x2.域（数据）映射（函数（d）{
返回d.session；
}));
y、 域（[0，d3.max（数据，函数（d））{
返回d.score；
})]);
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“.71em”）
.style（“文本锚定”、“结束”）
.文本（“分数”）；
svg.selectAll（“.bar”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“类”、“条”）
.attr（“x”，函数（d）{
返回x（d.session）；
})
.attr（“宽度”，x.rangeBand（））
.attr（“y”，函数（d）{
返回y（d.score）；
})
.attr（“高度”，功能（d）{
返回高度-y（d分数）；
});
var dataSum=d3.sum（数据，函数（d）{
返回d.score；
});
var line=d3.svg.line（）
.x（功能（d，i）{
返回x2（d.session）+i；
})
.y（功能（d，i）{
返回y（数据量/数据长度）；
});
追加（“路径”）
.基准（数据）
.attr（“类”、“行”）
.attr（“笔划宽度”、“2”）
.attr（“d”，行）

JS-Bin
矩形条{
填充物：青色；
}
路径线{
笔画：黑色；
}
现有代码追加了一个多段路径，该路径因从数据中每个条目的起点到下一个起点而短暂停止。此示例将其替换为从最左侧元素的开始位置到图形最右侧的一条直线


var数据=[{
“会议”：“1”，
“分数”：70分
},
{
“会议”：“2”，
“得分”：30分
},
{
“会议”：“3”，
“分数”：50分
},
{
“会议”：“4”，
“分数”：60分
},
{
“会议”：“5”，
“分数”：40分
}
];
var保证金={
前20名，
右:20,，
底数：30，
左：40
},
宽度=480-margin.left-margin.right，
高度=250-margin.top-margin.bottom；
var x=d3.scale.ordinal（）
.rangeRoundBands（[0，宽度]，.1）；
var x2=d3.scale.ordinal（）
.范围带（[0，宽度]，0）；
变量y=d3.scale.linear（）
.范围（[高度，0]）；
var xAxis=d3.svg.axis（）
.比例（x）
.东方（“底部”）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
data.forEach（函数（d）{
d、 分数=+d.分数；
});
x、 域（data.map）（函数（d）{
返回d.session；
}));
x2.域（数据）映射（函数（d）{
返回d.session；
}));
y、 域（[0，d3.max（数据，函数（d））{
返回d.score；
})]);
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“.71em”）
.style（“文本锚定”、“结束”）
.文本（“分数”）；
svg.selectAll（“.bar”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“类”、“条”）
.attr（“x”，函数（d）{
返回x（d.session）；
})
.attr（“宽度”，x.rangeBand（））
.attr（“y”，函数（d）{
返回y（d.score）；
})
.attr（“高度”，功能（d）{
返回高度-y（d分数）；
});
var dataSum=d3.sum（数据，函数（d）{
返回d.score；
});
svg.append（“行”）
.attr（“x1”，x2（1））
.attr（“x2”，宽度）
.attr（“y1”，y（数据量/数据长度））
.attr（“y2”，y（dataSum/data.length））

JS-Bin
矩形条{
填充物：青色；
}
线{
笔画：黑色；
}