Javascript d3.js带目标线的条形图

如何在D3中构建带有目标线的条形图？我尝试在横条顶部添加一条带有目标字段的线，但我尝试实现的目标与此类似：

这是我的桌子：

Country,Nitrogen2012,Target
Poland,0.22,0.213
Sweden,0.13,0.156
Russia,0.11,0.097
Finland,0.11,0.110
Latvia,0.08,0.076
Atmospheric,0.08,0.075
Germany,0.07,0.075
Denmark,0.07,0.088
Lithuania,0.06,0.050
Estonia,0.03,0.033
Shipping,0.02,0.003

条形图的代码如下所示：

var保证金={
前20名，
右:20,，
底数：30，
左：80
},
宽度=900-边距。左侧-边距。右侧，
高度=200-margin.top-margin.bottom；
var formatPercent=d3.format（“.0%”）；
var x=d3.scale.ordinal（）
.rangeRoundBands（[0，宽度]，.1）；
变量y=d3.scale.linear（）
.范围（[高度，0]）；
var xAxis=d3.svg.axis（）
.比例（x）
.orient（“底部”）
.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.1.2.2.2.2.2.2.2.2.1.2.2；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）
.勾号（2，“d”）
.1.2.1尺寸（-1）
.格式（格式百分比）；
var tip=d3.tip（）
.attr（'class'，'d3 tip'）
.偏移量（[-10,0]）
.html（函数（d）{
返回“平均标准化输入：”+d.N 2012*100+”；
})
var chart1=d3.选择（#graph1”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
图1.呼叫（tip）；
d3.csv（“氮气输入2012比较到目标.csv”），类型、功能（错误、数据）{
x、 域（data.map）（函数（d）{
返回d.国家；
}));
//域（data.map（函数（d）{return d.Target}））；
y、 域（[0，d3.max（数据，函数（d））{
返回d.2012
})]);
图1.附加（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
图1.附加（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）；
图表1.选择全部（“.bar”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“类”、“条”）
.attr（“x”，函数（d）{
返回x（d.国家）；
})
.attr（“宽度”，x.rangeBand（））
.attr（“y”，函数（d）{
返回y（d.2012）；
})
.attr（“高度”，功能（d）{
返回高度-y（d.2012）；
})
.on（'mouseover'，tip.show）
.on（'mouseout'，tip.hide）；
});
功能类型（d）{
d、 硝酸盐2012=+d.Nitrophen2012；
返回d；
}

在您的输入选择中，添加行。您可以使用

svg:line

，但我更喜欢构建

路径

：

var eSel = chart1.selectAll(".bar")
    .data(data)
    .enter();

eSel.append("rect")
    .attr("class", "bar")
 ...

 eSel.append("path")
    .style("stroke", "blue")
    .style("stroke-width", 2)
    .attr("d", function(d){
      var rv = "M" + x(d.Country) + "," + y(d.Target); // move to
      rv += "L" + (x(d.Country) + x.rangeBand()) + "," + y(d.Target); // line
      return rv;
    });

---

工作示例。

非常好！谢谢