Сделайте диаграмму с диаграммами областей, имеющими как положительную, так и отрицательную ось y в dc или d3.js

Question

Я хочу сделать диаграмму, показанную на изображении ниже.

Судя по всему, он выглядит как композитный график, имеющий две зоны диаграммы добавляются поверх него, или область диаграммы сложенных. Мне трудно рисовать эту диаграмму. Когда я попытался рисовать таблицу с разбивкой по областям с одним стекем, имеющим отрицательные значения. Я получил график, где значения были построены сверху вниз, но не ниже оси x. Я также попытался использовать пример d3 streamgraph, изменив значения y0 и y1, но не смог получить этот эффект. Я новичок в D3, пожалуйста, помогите мне в этом отношении.

Answer 1

Я думаю, что это то, что вы хотите, но помните, что это будет работать только для двух серий, и вы должны динамически вычислять y-домен.

var margin = { 
 
    top: 20, 
 
    right: 20, 
 
    bottom: 30, 
 
    left: 50 
 
    }, 
 
    width = 400 - margin.left - margin.right, 
 
    height = 200 - margin.top - margin.bottom; 
 

 
var parseDate = d3.time.format("%y-%b-%d").parse, 
 
    formatPercent = d3.format(".0%"); 
 

 
var x = d3.time.scale() 
 
    .range([0, width]); 
 

 
var y = d3.scale.linear() 
 
    .range([height, 0]); 
 

 
var color = d3.scale.category20(); 
 

 
var xAxis = d3.svg.axis() 
 
    .scale(x) 
 
    .orient("bottom"); 
 

 
var yAxis = d3.svg.axis() 
 
    .scale(y) 
 
    .orient("left"); 
 

 
var area = d3.svg.area() 
 
    .x(function(d) { 
 
    return x(d.date); 
 
    }) 
 
    .y0(function(d) { 
 
    return y(d.y0); 
 
    }) 
 
    .y1(function(d) { 
 
    return y(d.y0 + d.y); 
 
    }); 
 

 
var stack = d3.layout.stack() 
 
    .values(function(d) { 
 
    return d.values; 
 
    }); 
 

 
var svg = d3.select("body").append("svg") 
 
    .attr("width", width + margin.left + margin.right) 
 
    .attr("height", height + margin.top + margin.bottom) 
 
    .append("g") 
 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 

 
var data = [{ 
 
    "date": "11-Oct-13", 
 
    "A": 41.62, 
 
    "B": -22.36 
 
}, { 
 
    "date": "11-Oct-14", 
 
    "A": 41.95, 
 
    "B": -22.15 
 
}, { 
 
    "date": "11-Oct-15", 
 
    "A": 37.64, 
 
    "B": -10.77 
 
}, { 
 
    "date": "11-Oct-16", 
 
    "A": 37.27, 
 
    "B": -24.65 
 
}, { 
 
    "date": "11-Oct-17", 
 
    "A": 42.74, 
 
    "B": -21.87 
 
}]; 
 

 
y.domain([-24.77, 42.74]); 
 
color.domain(d3.keys(data[0]).filter(function(key) { 
 
    return key !== "date"; 
 
})); 
 

 
data.forEach(function(d) { 
 
    d.date = parseDate(d.date); 
 
}); 
 

 
var browsers = color.domain().map(function(name) { 
 
    return { 
 
    name: name, 
 
    values: data.map(function(d) { 
 
     return { 
 
     date: d.date, 
 
     y: d[name], 
 
     y0: 0 
 
     }; 
 
    }) 
 
    }; 
 
}); 
 

 
x.domain(d3.extent(data, function(d) { 
 
    return d.date; 
 
})); 
 

 
var vars = svg.selectAll(".vars") 
 
    .data(browsers) 
 
    .enter().append("g") 
 
    .attr("class", "vars"); 
 

 
vars.append("path") 
 
    .attr("class", "area") 
 
    .attr("d", function(d) { 
 
    return area(d.values); 
 
    }) 
 
    .style("fill", function(d) { 
 
    return color(d.name); 
 
    }); 
 

 

 
svg.append("g") 
 
    .attr("class", "x axis") 
 
    .attr("transform", "translate(0," + height + ")") 
 
    .call(xAxis); 
 

 
svg.append("g") 
 
    .attr("class", "y axis") 
 
    .call(yAxis);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>