0

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

1 回答 1

2

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

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 都是访问函数。所以基本上你每次都将 height 传递给 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 堆栈布局

在概念中，堆栈布局重新排列您的数据，使得返回的布局对象基本上包含多个数组（我说数组是因为它使理解实际结构变得简单，就像您编写函数时我猜想的映射一样）。现在您需要一个单独的 area 函数，可以在此返回的布局中为每个实例迭代调用该函数。在每个实例中，我的意思是不同的数组，当传递给 area 函数时会导致不同的区域。我希望我的解释能有所帮助，但我自己对这个话题很陌生，所以这里有一个例子，它会有所帮助：堆积面积图

这是执行此操作的理想方法，如果您不介意简单的解决方法，那么这就是我目前正在做的事情：说现在而不是只是 [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);
}

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

于 2015-09-16T02:41:16.913 回答