javascript - D3具有指定底数/底数的面积图

是否可以在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>

最佳答案

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

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

现在，理想情况下，面积图的基础将相应变化。我希望这可以帮助您实现自己的目标。请告诉我解决方案是否无法按预期工作。如有必要，我将制作一个小提琴。

编辑：为响应您的问题的更改，要绘制的每个区域都必须具有自己的功能。现在，这将需要您编写多个仅针对一两个区域的区域函数。但是，如果您打算用多个彩色区域填充整个图表，那么我相信您需要使用第一个d3 stack layout

在概念上，堆栈布局会重新排列您的数据，以便返回的布局对象基本上包含多个数组（我说数组是因为它使您更容易理解实际结构，就像您编写要映射的函数一样）。现在，您需要一个区域函数，可以针对此返回布局中的每个实例迭代调用该函数。每种情况下，我指的是不同的数组，当传递给area函数时会导致不同的数组。我希望我的解释会有所帮助，但是我本人对该主题是陌生的，因此下面的示例将对您有所帮助：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);
}

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