D3.js 从底部开始的D3面积图转换

我想制作一个从x轴向上过渡的面积图的动画。。我已经研究了这个示例，但是控制y1（）却起到了相反的作用

这里有一个块，将这两者结合在一起：

变化： 从

y（0）

到

y（d.close）

下面是面积函数：

// define the area
var area = function (datum, boolean) {
  return (d3.area()
    .x(function(d) { return x(d.date); })
    .y0(height)
    .y1(function(d) { return boolean ? y(d.close) : y(0); }))(datum);
};

编辑：还更新了

valueline

（行函数）（我的错是我以前错过了它）。更新了链接

// define the line
var valueline = function (datum, boolean) {
  return (d3.line()
        .x(function(d) { return x(d.date); })
        .y(function(d) { return boolean ? y(d.close) : y(0); })
       )(datum);
};

---

希望这会有所帮助。

您可以先将该区域设置为一条简单的线，并使用

y1=高度

，然后使用

过渡

，该过渡将向最后一条插入该区域：

// initial area y = 0:
var initialarea = d3.area()
  .x(function(d) { return x(d.date); })
  .y0(height)
  .y1(height);

// the area in its final state
var area = d3.area()
  .x(function(d) { return x(d.date); })
  .y0(height)
  .y1(function(d) { return y(d.close); });

svg.append("path")
  .data([data])
  .attr("class", "area")
  .attr("d", initialarea) // initial state (line at the bottom)
  .transition().duration(1000)
  .attr("d", area); // final state

/*设置CSS*/
.线路{
填充：无；
笔画：钢蓝；
笔画宽度：2px；
}
.区域{
填充物：淡蓝色；
}
风险值数据=[
{日期：“2012年5月1日”，结束日期：“58.13”}，
{日期：2012年4月30日，截止日期：53.98}，
{日期：2012年4月27日，截止日期：67.00}，
{日期：2012年4月26日，截止日期：89.70}，
{日期：2012年4月25日，截止日期：99.00}，
{日期：2012年4月24日，截止日期：130.28}，
{日期：2012年4月23日，截止日期：166.70}，
{日期：2012年4月20日，截止日期：234.98}，
{日期：2012年4月19日，结束日期：345.44}，
{日期：2012年4月18日，截止日期：443.34}，
{日期：2012年4月17日，截止日期：543.70}，
{日期：2012年4月16日，结束日期：580.13}，
{日期：2012年4月13日，截止日期：605.23}，
{日期：2012年4月12日，截止日期：622.77}，
{日期：2012年4月11日，结束日期：626.20}，
{日期：2012年4月10日，截止日期：628.44}，
{日期：2012年4月9日，截止日期：636.23}，
{日期：2012年4月5日，截止日期：633.68}，
{日期：2012年4月4日，截止日期：624.31}，
{日期：2012年4月3日，截止日期：629.32}，
{日期：2012年4月2日，截止日期：618.63}，
{日期：2012年3月30日，截止日期：599.55}，
{日期：2012年3月29日，结束日期：609.86}，
{日期：2012年3月28日，截止日期：617.62}，
{日期：2012年3月27日，结束日期：614.48}，
{日期：2012年3月26日，结束日期：606.98}
];
//设置图形的尺寸和边距
var margin={顶部：20，右侧：20，底部：30，左侧：50}，
宽度=400-margin.left-margin.right，
高度=200-margin.top-margin.bottom；
//解析日期/时间
var parseTime=d3.timeParse（“%d-%b-%y”）；
//设定范围
var x=d3.scaleTime（）.range（[0，width]）；
变量y=d3.scaleLinear（）.range（[height，0]）；
//定义区域
var area=d3.area（）
.x（函数（d）{返回x（d.date）；}）
.y0（高度）
.y1（函数（d）{返回y（d.close）；}）；
//初始面积y=0：
var initialarea=d3.area（）
.x（函数（d）{返回x（d.date）；}）
.y0（高度）
.y1（高度）；
//界定界线
var valueline=d3.line（）
.x（函数（d）{返回x（d.date）；}）
.y（函数（d）{返回y（d.close）；}）；
//初始行y=0：
var initialvalueline=d3.line（）
.x（函数（d）{返回x（d.date）；}）
.y（函数（d）{返回高度；}）；
//将svg对象附加到页面主体
//将“组”元素附加到“svg”
//将“组”元素移动到左上角
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
//获取数据
//d3.csv（“data.csv”，函数（错误，数据）{
//如果（错误）抛出错误；
//格式化数据
data.forEach（函数（d）{
d、 日期=解析时间（d.日期）；
d、 close=+d.close；
});
//缩放数据的范围
x、 域（d3.extent（数据，函数（d）{返回d.date；}））；
y、 域（[0，d3.max（数据，函数（d）{返回d.close；}）]；
//添加区域
追加（“路径”）
.数据（[数据]）
.attr（“类别”、“区域”）
.attr（“d”，初始区域）
.transition（）.持续时间（1000）
.attr（“d”，区域）；
//添加valueline路径。
追加（“路径”）
.数据（[数据]）
.attr（“类”、“行”）
.attr（“d”，初始值行）
.transition（）.持续时间（1000）
.attr（“d”，valueline）；
//添加X轴
svg.append（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））；
//添加Y轴
svg.append（“g”）
.调用（d3.左（y））；
// });