垂直d3.svg.area？

Question

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

我从水平图表开始，然后它起作用了。参见 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));
});

Answer 1

虽然它可能对你没有帮助，但是像下面这样使用 css 怎么样

.area{
       fill:white;
      }

svg{
     background:#ccc;
    }

Answer 2

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

垂直d3.svg.area？

Vertical d3.svg.area?

javascript

d3.js

svg

charts

area