Question

我正在尝试将股票数据绘制到图表中，其中有一条线定义了先前的收盘价。我正在尝试绘制另一条线，如果值>上一个结束线，则该线为绿色，如果<则为红色，

问题是d3绘制了两条相同颜色的线并且没有链接它们。

图片和代码应该更有意义。

private static BigInteger calculateFactorial(BigInteger value) 
{
    return value.subtract(BigInteger.ONE).compareTo(BigInteger.ONE) == 0 ? value : value.multiply(calculateFactorial(value.subtract(BigInteger.ONE))); 
}

Answer 1

您在绿线中间过滤出一组点，但是您没有告诉d3您想要它为空的任何东西-因此它只是连接了两个最接近的点，它们位于红色的边缘线倾角。

相反，请为行生成器指定defined属性。这样，它将知道点存在于中间，但不会画出它们。

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    path {
      fill: none;
      stroke-width: 3px;
    }
  </style>
</head>

<body>
  <script>
    var data = d3.range(100).map(function(d){
      return {
        x: d * 1,
        y: Math.cos(4 * Math.PI * d / 100) * 100
      };
    });
    var lineGen = d3.line()
        .x((d) => d.x)
        .y((d) => d.y);

    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)
        .attr('viewBox', "0 -100 200 200");

    svg.append("path")
        .style('stroke', 'green')
        .attr("d", lineGen.defined((d, i, data) => {
        var next = data[i + 1];
        if (next) {
                    return next.y < 0 || d.y < 0;
        }
        return d.y < 0;
        })(data));


    svg.append("path")
        .style('stroke', 'red')
        .attr("d", lineGen.defined((d, i, data) => {
        var next = data[i + 1];
        if (next) {
                    return next.y >= 0 || d.y >= 0;
        }
        return d.y >= 0;
        })(data));
  </script>
</body>

D3忽略图纸缺失值

1 个答案: