垂直d3.svg.area？答案

【问题标题】：Vertical d3.svg.area?垂直d3.svg.area？
【发布时间】：2015-09-26 12:56:41
【问题描述】：

我正在尝试制作一个垂直面积图，它的右边框中有一条线。线被完美地绘制（从上到下），但该区域被绘制在路径的右侧，它应该在左侧。

我从水平图表开始，然后它起作用了。见jsfiddle。我也尝试过旋转路径，但无法获得所需的结果。

var xScale = d3.scale.linear().range([0, sm_width]),
    yScale = d3.time.scale().range([0, sm_height]);

var area = d3.svg.area().x(function(d) {
    return xScale(xValue(d));
})
.y0(sm_height).y1(function(d) {
    return yScale(yValue(d));
});

var line = d3.svg.line().x(function(d) {
    return xScale(xValue(d));
})
.y(function(d) {
    return yScale(yValue(d));
});

【问题讨论】：

根据我对文档的理解，您需要创建图表，然后将其旋转 90 度。该区域将介于 y0 和 y 值之间，因此，在您的示例中，这就是您的线下的区域。

标签： javascript d3.js svg charts area

【解决方案1】：

这可能对你没有帮助，像下面这样使用 css 怎么样

.area{
       fill:white;
      }

svg{
     background:#ccc;
    }

【讨论】：

【解决方案2】：

解决方案是像评论中提到的 Cool Blue 一样旋转图表本身。

【讨论】：