你不需要d3.svg.line()
这里。只需创建一个简单的行:
var lineEnd = 270;
var line = svg.append("line")
.attr("x1", lineEnd)
.attr("x2", lineEnd)
.attr("y1", 0)
.attr("y2", height)
.attr("stroke-width", 8)
.attr("stroke", "black")
.attr("stroke-dasharray", "8,8");
这是笨蛋:http://plnkr.co/edit/dOhZjRvBHzFqWFByerKH?p=preview http://plnkr.co/edit/dOhZjRvBHzFqWFByerKH?p=preview
PS:这不是 x 轴上的 270,这只是 SVG 上的 270px。现在你不能使用x
作为尺度,因为没有域。设置一个域x
并用它来设置条形的宽度。
首先,摆脱这个:
var max_n = 0;
var category = []
for (var d in info) {
max_n = Math.max(info[d].value, max_n);
category.push(info[d].name)
}
var dx = width / max_n;
var dy = height / info.length;
现在,设置比例:
var y = d3.scale.ordinal()
.domain(info.map(function(d){ return d.name}))
.rangeRoundBands([0, height], .1);
var x = d3.scale.linear()
.range([0, width])
.domain([0, d3.max(info, function(d){return d.value})])
然后将这些比例用于您的酒吧:
.attr("x", 0)
.attr("y", function(d){ return y(d.name)})
.attr("width", function(d) {return x(d.value)})
.attr("height", y.rangeBand())
修正了所有这些之后,now我们可以在比例中使用 270:
var line = svg.append("line")
.attr("x1", function(){ return x(lineEnd)})
.attr("x2", function(){ return x(lineEnd)})
.attr("y1", 0)
.attr("y2", height)
.attr("stroke-width", 6)
.attr("stroke", "black")
.attr("stroke-dasharray", "8,8")
这是更新后的插件:http://plnkr.co/edit/gtPA12qSf9mBoAY6MeDd?p=preview http://plnkr.co/edit/gtPA12qSf9mBoAY6MeDd?p=preview