在直方图上画一条线 - d3答案

【问题标题】：drawing a line on a histogram - d3在直方图上画一条线 - d3
【发布时间】：2014-04-03 07:50:04
【问题描述】：

我使用d3 创建了一个直方图。

一切都很好，这就是我卡住的地方。

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

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

我尝试了，尝试了，仍然在尝试，我想不出办法。

这是Fiddle。

请有人帮我画一条对应于某个特定值的线。

【问题讨论】：

有了你的刻度，你只能在条的位置画垂直线。如果您希望能够在两者之间画线，则需要线性比例而不是序数比例。
图表是响应式的。如果将序数更改为线性。它还会响应吗？
原则上是的。但是，制作直方图会更加困难。您可能需要使用两个单独的尺度（直方图为序数，线条为线性）。
太棒了....
只需传递与条形相同的 x 坐标即可。

标签： javascript d3.js

【解决方案1】：

如果有人有兴趣知道如何绘制垂直线，下面是如何绘制垂直线的代码。由 OP 提供的 Fiddle 编辑。

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; }

【讨论】：