d3.js - 用负值构建 D3js 面积图

Question

我们有一个带有负值的条形图示例...带有负值的条形图

面积图有类似的例子吗？

Answer 1

这是一个古老的问题，但我认为我可以为其他登陆这里的人提供一些启示。设置 svg 区域时，只需将 y0 设置为图表 0 行位置。例如：

d3.svg.area()
  .x(function(d) {
    return x(d.x);
  })
 .y0(function() {
   return y(0);
 })
 .y1(function(d) {
   return y(d.y);
 });

希望这可以帮助！

Answer 2

当然，我根据 Mike Bostock 关于可重用图表的帖子创建了一个小提琴：http : //jsfiddle.net/C5gYv/

基本上我所做的是检查数据是正数还是负数，然后分别设置 y0 和 y1：

    area = d3.svg.area()
        .x(X)

    ...

        g.select(".area").attr("d",
            area.y1(function (d) {
                // the highest point
                if (d[1] <= 0) {
                    return yScale(0);
                } else {
                    return Y(d);
                }
            })
                .y0(function (d) {
                // the lowest point
                if (d[1] <= 0) {
                    return Y(d);
                } else {
                    return yScale(0);
                }
            }));

希望有帮助！

Answer 3

我已经更新了 @Hardbyte 的 JSFiddle，因为我认为它不合适。

这是更新的小提琴新小提琴。

我改变的是 -

// Update the area path.
        if (showArea) {
            g.select(".area").attr("d",
            area.y1(function (d) {
                // the highest point
                return Y(d);
            })
            .y0(function (d) {
                // the lowest point
                return yScale(0);
            }));
        }