Вертикальный 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

Решение было вращать диаграмму себя как Cool Blue упоминается в комментарии.

Answer 2

Это не может помочь вам, хотя, что об использовании CSS, как ниже

.area{ 
     fill:white; 
     } 

svg{ 
    background:#ccc; 
    }