drawing a line on a histogram - d3

和自甴很熟 提交于 2019-12-24 13:37:23

问题


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.

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.

Here's the Fiddle.

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


回答1:


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


来源:https://stackoverflow.com/questions/22831098/drawing-a-line-on-a-histogram-d3

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!