在直方图上画一条线 - d3

时间:2014-04-03 07:50:05

标签: javascript d3.js

我使用d3创建了直方图。

一切都很好,而且我遇到了困难。

我想在某个值上画一条垂直线。

认为我想画一条对应某个值的线。假设180。

我尝试过,尝试过但仍在尝试我无法想办法。

这里是Fiddle

有人请帮我绘制一条与某些特定值对应的行。

1 个答案:

答案 0 :(得分:0)

如果有兴趣知道如何绘制垂直线,下面是关于如何绘制垂直线的代码。由OP提供的小提琴编辑。

var svg = d3.select(reference).append("svg")
    .attr("width", width)
    .attr("height", height + 20);
// to draw lines at x=6 and x=500
svg.append("g").selectAll("line")
    .data([
        { y1: y(0), y2: height, x1: 6, x2: 6 },
        { y1: y(0), y2: height, x1: 500, x2: 500 }
    ])
    .enter().append("line")
    .attr("class", "specification-line")
    .attr("y1", function (d) { return d.y1; })
    .attr("y2", function (d) { return d.y2; })
    .attr("x1", function (d) { return d.x1; })
    .attr("x2", function (d) { return d.x2; });

使用破折号和红色线设置样式

.specification-line { fill:none; stroke: #ff0000; stroke-opacity: .6; stroke-width: 1px; shape-rendering: auto; }