Question

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

以此为例：Stacked Area Chart

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

Highcharts将其称为“基本”区域图表，其中每个系列的颜色都不同，不同的不透明度。

我不会问“如果”这在D3中是可能的，我确信它是，但如果有人能解释如何做到这一点，我们将不胜感激。

Answer 1

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

好的，实现这一目标的几个提示：

使其更有效率＆＃34;开始在图表底部和其他区域添加区域，而不是使用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的面积图

1 个答案: