我要制作一个如下图所示的图表。
从外观上看,它看起来像一个合成图表,在其上面添加了两个面积图或一个堆积面积图。我在绘制此图表时遇到困难。当我尝试绘制具有负值的堆栈的堆积面积图时。我得到了一个图表,其中的值是从上到下绘制的,而不是从x轴下方绘制的。我还通过调整y0和y1的值来尝试d3流图的示例,但无法获得此效果。我是D3的新手,请在这方面帮助我。
我认为这是您想要的,但是请记住,这仅适用于两个系列,并且您必须动态计算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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句