在 D3 中生成类似于 Highcharts Basic Area 的面积图

Question

希望有人能帮助我解决我认为可能是一个简单的问题。

以此为例：Stacked Area Chart

我希望能够复制这个，但是让每个系列齐平到轴的底部以更好地展示每个系列。

Highcharts 将此称为 "Basic" 面积图，其中每个系列的颜色都不同，不透明度也不同。

我不会问 "IF" 这在 D3 中是可能的，我敢肯定，但如果有人能解释如何做到这一点，我们将不胜感激。

Answer 1

通常在创建区域图表时，每个区域都从前一个区域结束的地方开始（考虑到从底部开始的一个区域 "starts"）。但是你想让它不是从另一个区域的末端开始，而是从 x 轴开始，对吧？

好的，实现这一目标的一些技巧：

要使其更多 "efficient" 开始在图表底部和其余区域添加区域，而不是使用 d3.append，请使用 d3.insert 将允许您在刚刚添加的区域之前插入新区域。
要分别为每个区域应用不透明度，请使用 .each()。

您的代码如下所示：

d3.select('svg g')
.selectAll('path.area')
.data(areas)
.enter()
.insert('path','path.area:first-child')
.attr('class','area')
.attr('d', function(d,i) {
    return yourAreaFunction(d,i);
})
.each(function(d,i) {
    d3.select(this)
    .style('fill', yourFillFunction(d,i))
    .style('opacity', function() {
        return ((1 / areas.length) * (i + 1));
    })
});

重要说明：这段代码只是一个废料，我自己没有尝试过。尽管如此，它还是我认为您正在寻找的近似值。

更新：我检查了用于不透明度的公式，发现了一个更好的公式。实际上，如果每个区域使用不同的颜色，我认为这是正确的，...如果使用相同的颜色，则使用 return (1 - (1 / areas.length) * i );。

在 D3 中生成类似于 Highcharts Basic Area 的面积图

Producing an area chart in D3 similar to Highcharts Basic Area

highcharts

d3.js