Вертикальная d3.svg.area?

Я пытаюсь сделать вертикальную диаграмму с линией в ее правильных границах. Линия рисуется идеально (сверху вниз), но область рисуется с правой стороны пути, она должна быть слева.

Я начал с горизонтальной диаграммы, тогда это сработало. См. 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));
});

javascript svg charts d3.js area
person NestedWeb    schedule 26.09.2015    source источник
comment
Насколько я понимаю документы, вам нужно будет создать диаграмму, а затем повернуть ее на 90 градусов. Область будет находиться между значениями y0 и y, поэтому в вашем примере это область под вашей линией.   -  person Cool Blue    schedule 26.09.2015

Ответы (2)


arrow_upward
0
arrow_downward

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

.area{
       fill:white;
      }

svg{
     background:#ccc;
    }
person yoshio9    schedule 04.04.2016

arrow_upward
0
arrow_downward

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

person NestedWeb    schedule 31.08.2016