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

现在理想情况下，区域图表的基础会有所不同。我希望这可以帮助你实现你的目标。如果解决方案没有按预期工作，请告诉我们。如果有必要，我会创造一个小提琴。

编辑：为了回答您问题的变化，您要绘制的每个区域都必须有自己的功能。现在，您需要编写多个区域函数，这些函数仅适用于一个或两个区域。但是，如果您打算用多个彩色区域填充整个图表，我相信您需要先使用此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);
}

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

D3具有指定基数/楼层的面积图

1 个答案: