在直方图上画一条线-d3 [英] drawing a line on a histogram - d3

问题描述

我已经使用d3创建了直方图.

I've created a histogram using d3.

一切都很好，这就是我被困住的地方.

Everything was fine and here's where I got stuck.

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

I wanted to draw a vertical line on some value.

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

Think that I wanted to draw a line corresponding to some value. Suppose 180.

我尝试了，尝试了并且仍然尝试着我找不到解决方法.

I tried, tried and still trying I can't figure a way to do it.

这是 小提琴 .

请有人帮我画一条与某些特定值相对应的线.

Someone please help me to draw a line corresponding to some specific value.

推荐答案

如果有兴趣了解如何绘制垂直线的人，下面是有关如何绘制垂直线的代码.从OP提供的Fiddle中编辑.

If anyone interested to know how to draw vertical lines, below is the code on how to draw vertical line. Edited from the Fiddle provided by 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; });

用虚线和红色线条标记一点

Styling a bit with dashes and red color line

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

这篇关于在直方图上画一条线-d3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！