时间戳

首页 > 解决方案 > 在 D3.js 中在另一个折线图上绘制一条常量线

reactjs - 在 D3.js 中在另一个折线图上绘制一条常量线

问题描述

目标是显示一条线作为阈值。

这是从值绘制的线。

注意：lineGenerator只是从压缩数据中获取相应的 x、y。

    svg
      .append('path')
      .data([d3.zip(xValues, yValues)])
      .attr('fill', 'none')
      .attr('stroke', '#000')
      .attr('stroke-width', 1.5)
      .attr('d', lineGenerator);

但是，当我想在顶部添加一个只是常数的附加折线图时，它似乎不想以相同的比例绘制。从下面的代码生成的行大约是总 x 值的 1/8，我知道这xExtent是正确的。

注意：这xExtent只是上一条路径中 X 值的最小值/最大值。

    svg
      .append('line')
      .attr('x1', xExtent)
      .attr('y1', 1.5)
      .attr('x2', xExtent[1])
      .attr('y2', 1.5)
      .attr('stroke', '#000')
      .attr('stroke-width', 1.5);

不太确定我做错了什么，因为我希望这条恒定线显示在整个图表的顶部。

标签： reactjsd3.jslinegraph

解决方案

参考：http ://bl.ocks.org/mikehadlow/93b471e569e31af07cd3

var xScale = d3.time.scale().range([0, width]).domain(xDomain);
var yScale = d3.scale.linear().range([height, 0]).domain(yDomain);    

g.append('line')
   .attr('x1', xScale(xDomain[0]))
   .attr('y1', yScale(warnLine.lineValue))
   .attr('x2', xScale(xDomain[1]))
   .attr('y2', yScale(warnLine.lineValue))
   .attr('class', 'zeroline');

推荐阅读