时间戳

首页 > 解决方案 > D3线由多段组成

javascript - D3线由多段组成

问题描述

我根据以下代码画了一条线：在x和y刻度下创建

const x = d3.scaleLinear()
  .domain([0, data.length - 1])
  .range([this.margin.left, contentWidth]);

const y = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.value)])
  .range([20, 0]);

一个从 0 到 data.length - 1 的简单比例，另一个计算数据的最大值。

const apLineBottom = d3.line()
  .x(d => x(data.indexof(d))
  .y(d => (contentHeight / 2) + y(d.value));

const apLineTop = d3.line()
  .x(d => x(data.indexof(d))
  .y(d => (contentHeight / 2) - 10 - y(d.value));

接下来是线条，我希望它们在中间相互平行（根据给定的数据上下移动）。

svg.append("path")
  .attr("class", "line")
  .attr("d", apLineBottom(data))
  .style("fill", "none")
  .style("stroke", "red")
  .style("stroke-width", 2);

svg.append("path")
  .attr("class", "line")
  .attr("d", apLineTop(data))
  .style("fill", "none")
  .style("stroke", "red")
  .style("stroke-width", 2);

接下来，我将它们添加到 svg 中，结果如下：这不是我想要的，因为东西突出了。我错过了什么来平滑曲线吗？

供参考：图像仅包含底线。

例子

例子

提前致谢

标签： javascriptd3.js

解决方案

推荐阅读