Question

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

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

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

Answer 1

使用area generator代替行生成器，而不是......

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

例如，像这样：

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

someValue中的y0是您所在地区的基地。

这是一个简单的演示：

＆＃13;

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 d.x
  })
  .y1(function(d) {
    return d.y
  })
  .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');

＆＃13;

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

＆＃13;

PS：笔画（＆＃34; steelblue＆＃34;）将围绕所有路径绘制。这可能不是你想要的。在这种情况下，修复正在创建两条路径：您现在拥有的路径，钢笔蓝色笔划和无填充，以及我在此答案中显示的区域，没有笔划和红色填充。像这样：

＆＃13;

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 d.x
  })
  .y1(function(d) {
    return d.y
  })
  .y0(function() {
    return 150
  })
  .curve(d3.curveMonotoneX);

var lineGenerator = d3.area()
  .x(function(d) {
    return d.x
  })
  .y(function(d) {
    return d.y
  })
  .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');

＆＃13;

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

＆＃13;

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

1 个答案: