繁体   English   中英

向d3图表添加水平线显示错误的值

Adding a horizontal line to d3 graph displays at the wrong value

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我试图在我的图表中添加一条水平线,相对于y轴值,问题是它们出现在错误的位置。

2条线应相对于y轴值显示在值90和140处。

我用来添加该行的代码如下:

if (before_meal !== null || after_meal !== null) {
                    svg.append("svg:line")
                        .attr("x1", 0)
                        .attr("x2", width)
                        .attr("y1", before_meal)
                        .attr("y2", before_meal)
                        .style("stroke", "rgb(189, 189, 189)");

                    svg.append("svg:line")
                        .attr("x1", 0)
                        .attr("x2", width)
                        .attr("y1", after_meal)
                        .attr("y2", after_meal)
                        .style("stroke", "rgb(189, 189, 189)");
}

请在这里查看我的工作示例: JSFiddle

1 个回复

在你的代码中你有这个:

var y = d3.scale.linear()
       .range([height, 0]);

这将返回一个函数y ,它将像素空间映射到您的绘图坐标空间。

所以当你这样做时:

.attr("y1", before_meal)

你告诉d3把一条线放在90“像素”。 而是使用:

.attr("y1", y(before_meal))

这告诉d3将90 y轴单位转换为适当的像素。

更新了小提琴

1 在图表中添加水平线

我正在从表格中生成图表。 我想在图表中有一条水平线。 我将此称为设定点,并且数据在表的E列中可用。 另外,我想更改m轴刻度。 我希望轴值的范围为0-10,并带有百分比符号。 任何线索都将有所帮助。 我一直在尝试用图表完成此操作。 ...

2 D3 图表工具:如何在柱状图中的目标线(附加水平线)右侧添加标签

我使用 D3 Charting tool v4 绘制了以下图表。 我在这篇文章的底部附上了完整的代码。 红线是要实现的目标。 以下代码块绘制了这条线: 现在我需要用它右侧的文本增长目标 (7)和两行标记这一行。 标签也必须分成两行! 以下屏幕截图显示了所需的输出。 我怎样才能实现上 ...

4 在IReport的levey Jennings图表上从SD添加水平线

我正在尝试向我的levey jennings图中添加水平线,到目前为止,我仅使用范围值标记添加了2条,这是使用内置的图表定制器组件,但我不确定是否从那里放置那两条线以及如何获得其他线代替图表的其他部分,分别为3.0 sd,2.0 sd,-1sd和-2s 香港专业教育学院试图添加另一个值标记 ...

5 在C#中向图表添加水平线

我正在使用System.Windows.Forms.DataVisualization.Chart绘制一些x,y散点数据,如下所示: 我想在该图表上添加一条水平线,其平均值为y​​ =常数。 我怎样才能做到这一点? 请注意,x轴是一个字符串 实际上,x轴是时间(hh:mm ...

6 向 D3.js barplot 函数添加水平线

我创建与被绑定到特定地理点弹出D3 barplots的单张地图。 我使用这个代码来创建单张弹出窗口(但我自己的数据):http://bl.ocks.org/Andrew-Reid/11602fac1ea66c2a6d7f78067b2deddb 我希望能够增加一个固定的水平线(这将代表该数据的阈值 ...

7 如何在不同值的列上添加水平线

如何使用高图在不同值的列上添加一条水平线。 情节线似乎跨越所有列。 我们希望每一列有不同级别的一行。 请参阅示例图像。 我们正在尝试添加图片中红色显示的线条。 ...

8 Migradoc 添加水平线

如何在 Migradoc 中添加一条简单的水平线,以便将线上方的内容与线下方的内容分开? 第 1 段 第 2 段 第 3 段 等等 ...

9 添加水平线直方图gnuplot

我想在gnuplot的直方图中添加一条水平线,这可能吗? 我的直方图在x轴上:alea1 alea 2 alea3 nalea1 nalea 2 nalea 3,y轴从0到25。 在22,我想添加一条横线,从直方图的一端到另一端。 ...

10 向图形添加水平线

所以我有这个曲线中有两条曲线,而我试图在添加最后曲线(A3 = 0.1), loglog曲线。 出于某种原因,它不会绘制任何内容。 代码如下。 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM