使用D3.js（v4）填充折线图

Question

试图建立折线图，我有以下代码。

var lineGraph = svgContainer.append('path')
    .attr('d', lineFunction(lineData))
    .attr('stroke', 'steelblue')
    .attr('stroke-width', 2)
    .attr('fill', 'red' );

我想尝试将('fill', 'red')替换为仅从一行开始填充的填充。 知道我该如何解决吗？

Answer 1

代替区域生成器，使用区域生成器 ，它可以...

...为给定的数据数组生成一个区域。

例如，如下所示：

var areaGenerator = d3.area()
  .x(function(d) {
    return d.x
  })
  .y1(function(d) {
    return d.y
  })
  .y0(function() {
    return someValue
  });

y0中的someValue是您所在区域的基础。

这是一个简单的演示：

 var svg = d3.select("svg"); var data = d3.range(10).map(function(d) { return { x: d * 30 + 10, y: Math.random() * 130 + 10 } }); var areaGenerator = d3.area() .x(function(d) { return dx }) .y1(function(d) { return dy }) .y0(function() { return 150 }) .curve(d3.curveMonotoneX); var area = svg.append('path') .attr('d', areaGenerator(data)) .attr('stroke', 'steelblue') .attr('stroke-width', 2) .attr('fill', 'red'); 

 <script src="//d3js.org/d3.v4.min.js"></script> <svg></svg> 

PS：笔划（“ steelblue”）将在所有路径上绘制。 那可能不是您想要的。 在这种情况下，修复程序将创建两个路径：您现在所拥有的路径，带有钢蓝色笔触，没有填充，以及我在此答案中显示的区域，没有笔触和红色填充。 像这样：

 var svg = d3.select("svg"); var data = d3.range(10).map(function(d) { return { x: d * 30 + 10, y: Math.random() * 130 + 10 } }); var areaGenerator = d3.area() .x(function(d) { return dx }) .y1(function(d) { return dy }) .y0(function() { return 150 }) .curve(d3.curveMonotoneX); var lineGenerator = d3.area() .x(function(d) { return dx }) .y(function(d) { return dy }) .curve(d3.curveMonotoneX); var area = svg.append('path') .attr('d', areaGenerator(data)) .attr('stroke-width', 2) .attr('fill', 'red'); var line = svg.append('path') .attr('d', lineGenerator(data)) .attr('stroke', 'steelblue') .attr('stroke-width', 3) .attr('fill', 'none'); 

 <script src="//d3js.org/d3.v4.min.js"></script> <svg></svg>