javascript - D3 指定基准/楼层的面积图

Question

是否可以在 D3 中制作面积图，我可以在其中指定面积图的下限(作为另一个图)。

类似这样的事情:

因此，地板并非始终位于 Y=0，它实际上是从 y=1.03^X 派生的图

这是我的代码:

var NSW = "NSW";
var QLD = "QLD";

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

var getStat = function(year, volatility, basis) {
    // volatility = 0.04;
    // basis = 1.11;

    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.04, 1.11),getStat(year, 0.02, 1.07)]; });   // generate bogus data
var nsw = data.map(function(d) { return d[0].value;}); // extract new south wales data
var qld = data.map(function(d) { return d[1].value;}); // extract queensland data

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([height,0]);
var area = d3.svg.area().x(function(d,i) { return x(i); }).y0(height).y1(function(d, i) { return y(d); })

console.log([nsw,qld])

chart
.selectAll("path.area")
.data([nsw,qld])          // !!! 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][i]; })
.attr("d", area);

还有我的 HTML:

<svg id="chart"></svg>

Answer 1

这是一个可以帮助您理解上下文的示例。

var area = d3.svg.area()
.x(function(d) { return x(d.xValue); })
.y0(height)
.y1(function(d) { return y(d.xValue^3); });

现在，当您执行此操作时，基础 y0 已固定在当前图表基础的全高度。但从根本上来说 y0,y1 都是访问函数。因此基本上每次将每个数据值的高度传递给 y0 。现在如果你把它改成这样:

var area = d3.svg.area()
.x(function(d) { return x(d.xValue); })
.y0(function(d){ return y(d.xValue/2);}) //FUNCTION FOR BASE-Y
.y1(function(d) { return y(d.xValue^3); }); //FUNCTION FOR TOP-Y

现在，理想情况下，面积图的基础会相应变化。我希望这可以帮助您实现您正在尝试的目标。请告诉我该解决方案是否未按预期工作。如果有必要的话，我会创建一个 fiddle 。

编辑:为了回应您问题的变化，您要绘制的每个区域都必须有自己的功能。现在，这需要您编写多个区域函数，而这些函数仅适用于一两个区域。但是，如果您打算用多个彩色区域填充整个图表，我相信您需要首先使用此 d3 stack layout

在概念中，堆栈布局重新排列您的数据，以便返回的布局对象基本上包含多个数组(我说数组是因为它可以让您轻松理解实际结构，就像您编写我猜用于映射的函数一样)。现在您需要一个区域函数，可以为此返回的布局中的每个实例迭代调用该函数。对于每个实例，我指的是不同的数组，当传递给区域函数时会产生不同的区域。我希望我的解释有所帮助，但我自己对这个主题很陌生，所以这里有一个示例，它将有所帮助: Stacked Area Chart

这是执行此操作的理想方法，如果您不介意一个简单的解决方法，那么这就是我目前正在做的事情:现在说，而不是仅仅 [nsw,qld] 您想要绘制 [nsw1] 的区域,qld1],[nsw2,qld2],……依此类推。

iterationData = [[nsw,qld],[nsw1,qld1],[nsw2,qld2],........];
for(i in iterationData){
    chart
    .data(iterationData[i])
    .append("path")
    .attr("fill", "fixed_color_value/color_scale(category10/category20)")
    .attr("class", function(d,i) { return [NSW,QLD][i]; })
    .attr("d", area);
}

希望这能彻底回答您的问题。