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