Javascript 如何让D3.js路径生成器附加两点？

我想使用D3.js创建一个有水平线的图形，这些线通过一条线连接。请参见此示例：

在一些教程的帮助下，我设法用直线显示水平条。jsfiddle.net/m2p1xky9/4/

对于显示连接的条，使用path对我来说很有意义

但我没有以正确的方式实施它

我想我需要让lineFunction附加两个点。我的方法不起作用：

   var lineFunction = d3.svg.line()
          .x(function(d) { return x(d.letter); })
          .y(function(d) { return y(d.frequency); })
          .interpolate("linear")
          .x(function(d) { return x(d.letter)+x.rangeBand(); })
          .y(function(d) { return y(d.frequency); })
          .interpolate("linear");

实施该战略的正确方法是什么？

战略 直线函数不关心有多少个点，它需要一个点数组，它只是将它们全部连接起来。访问器函数应用于您向其馈送的每个点。
您需要一个比数据少一个成员的行集合，因此需要绑定一些虚拟数据，然后需要构造具有两点的成员，并将它们提供给line函数

代码

数据=[
{
信：“A”，
频率：.08167
}, {
信：“B”，
频率：.01492
}, {
信：“C”，
频率：.02782
}, {
信：“D”，
频率：.04253
}, {
信：“E”，
频率：.12702
}
];
var margin={顶部：20，右侧：20，底部：30，左侧：40}，
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var x=d3.scale.ordinal（）
.rangeRoundBands（[0，宽度]，.1）；
变量y=d3.scale.linear（）
.rangeRound（[高度，0]）；
//定义X轴：
var xAxis=d3.svg.axis（）
.比例（x）
.东方（“底部”）；
//定义y轴：
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）
.勾号（10，“%”）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
x、 域（data.map（函数（d）{返回d.letter；}））；
y、 域（[0，d3.max（数据，函数（d）{返回d.frequency；}）]；
//附加X轴：
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
//附加Y轴：
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
//附加行：
svg.selectAll（“.line”）
.数据（数据）
.输入（）
.附加（“行”）
.attr（“类”、“行”）
.attr（“x1”，函数（d）{返回x（d字母）；}）
.attr（“y1”，函数（d）{返回y（d.frequency）；}）
.attr（“x2”，函数（d）{return x（d.letter）+x.rangeBand（）；}）
.attr（“y2”，函数（d）{返回y（d.frequency）；}）
var lineFunction2=d3.svg.line（）
.x（函数（d）{返回d.x；}）
.y（函数（d）{返回d.y；}）
.插入（“线性”）
var lineGraph=svg.selectAll（“.connect”）
.数据（d3.范围（数据.长度-1））
.enter（）.append（“路径”）
.attr（“类”、“连接”）
.attr（“d”，函数（d，i）{
变量p1=数据[i]，p2=数据[i+1]；
返回线路功能2([
{x:x（p1.字母）+x.rangeBand（），y:y（p1.频率）}，
{x:x（p2.字母），y:y（p2.频率）}
])
})
.attr（“笔划”、“蓝色”）
.attr（“笔划宽度”，2）
.attr（“填充”、“无”）
.line{
笔画：灰色；
笔画宽度：1；
}
.安讯士{
字体：10px无衬线；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
.x轴路径{
显示：无；
}
我回答了你的问题吗？@cool blue你回答了。实际上我的问题是如何画一条连续的线。但您的解决方案更好，使我能够为水平段使用不同的厚度。我猜我的问题不够明确。但是，我希望有一个比直接访问数据数组更优雅的解决方案。类似于data（）-函数。
   var lineFunction = d3.svg.line()
          .x(function(d) { return x(d.letter); })
          .y(function(d) { return y(d.frequency); })
          .interpolate("linear")
          .x(function(d) { return x(d.letter)+x.rangeBand(); })
          .y(function(d) { return y(d.frequency); })
          .interpolate("linear");