Question

我们有一个带负值的条形图示例...... Bar Chart with negative values

区域图是否有类似的例子？

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

当然，我根据迈克博斯托克在reusable charts的帖子创建了一个小提琴：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，因为我认为它不合适。

这是更新的小提琴new fiddle。

我更改的是-

// 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);
            }));
        }

使用负值构建D3js区域图表

3 个答案: