Question

我有一张D3图表应该是这样的：

但它看起来像这样：

这是我使用的代码：

<!DOCTYPE html>
<meta charset="utf-8">
<head>

</head>
<body>
<svg id="chart"></svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
var NSW = "NSW";
var QLD = "QLD";

var width = 600;
var height = 400;
var years = [];

var getStat = function(year, volatility, basis) {
    return {
        d: year,
        x: basis,
        vol: volatility,
        value: 45 * Math.pow(basis, year),
        high: 45 * Math.pow(basis+volatility, year),
        low: 45 * Math.pow(basis-volatility, year),
    }
}

for(i = 0; i < 25; i++) {
    years.push(i);
}

var data = years.map(function(year){ return [getStat(year, 0.03, 1.08),getStat(year, 0.02, 1.08), getStat(year, 0.01, 1.08)]; });   // generate bogus data
var set_one = data.map(function(d) { return d[0];});
var set_two = data.map(function(d) { return d[1];});
var set_three = data.map(function(d) { return d[2];});

var chart = d3.select("#chart").attr("width", width).attr("height", height).append("g");
var x = d3.scale.linear().domain([0, years.length]).range([0, width]);
var y = d3.scale.linear().domain([0, d3.max(data, function(d){ return Math.max(d[0].high, d[1].high); })]).range([0, height]);
var area = d3.svg.area().x(function(d,i) { return x(i); })
.y0(function(d, i){ return d.low}) //FUNCTION FOR BASE-Y
.y1(function(d, i){ return d.high * 0.99;}); //FUNCTION FOR TOP-Y

chart
.selectAll("path.area")
.data([set_one,set_two,set_three])          // !!! here i can pass both arrays in.
.enter()
.append("path")
.attr("fill", "rgba(0,0,0,0.5)")
.attr("class", function(d,i) { return [NSW,QLD,"T"][i]; })
.attr("d", area);

</script>

我做错了什么？

Answer 1

SVG中的y纵坐标向下增加。试试这个......

var y = d3.scale.linear().domain([d3.max(data, function(d){ return Math.max(d[0].high, d[1].high); }), 0]).range([0, height]);

Answer 2

实际上你没有做错，y轴向下从0开始从上到下height。因此，要翻转它，您可以将y值设置为height - yValue：

var area = d3.svg.area().x(function(d,i) { return x(i); })
.y0(function(d, i){ return (height - (d.low))}) //FUNCTION FOR BASE-Y
.y1(function(d, i){ return (height - (d.high * 0.99))}); //FUNCTION FOR TOP-Y

Fiddle Example

Answer 3

与HTML / CSS / Canvas中的所有内容一样，Y轴的顶部为0，底部为height。

因此，根据您的设置，图表行为正确。

有多种方法可以更改图表方向。

a）您可以更改轴var y = d3.scale.linear().domain([...]).range([height, 0]);

的范围

b）您可以更改轴var y = d3.scale.linear().domain([d3.max(data, function(d){ return Math.max(d[0].high, d[1].high); }), 0]).range([...]);

的域

或c）更改图表使用d3.svg.area().y0(...)和d3.svg.area().y1(...)

获取其y值的方式

我建议使用第一个选项，因为这实际上指定了您的域投射到的范围。

Answer 4

我认为你的y缩放存在问题。我已经从范围（[height，0]最初的范围（[0，height]）反转了范围，因为这应该是按照d3规范的方式你必须在计算图的高度时改变逻辑。

这里我附上了固定代码。

{{1}}

为什么我的D3堆叠面积图会翻转？

4 个答案: