Vertical d3.svg.area?

本文关键字：area svg d3 Vertical 更新时间：2023-09-26

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

我从一个水平图表开始，它奏效了。看到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));
});

这可能对你没有帮助，不如在

下面使用css

.area{
       fill:white;
      }
svg{
     background:#ccc;
    }

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