Javascript 使用D3.js v5在两条曲线之间着色_Javascript_D3.js

Javascript 使用D3.js v5在两条曲线之间着色

javascript d3.js

Javascript 使用D3.js v5在两条曲线之间着色,javascript,d3.js,Javascript,D3.js,我试图在两条曲线（时间序列）之间阴影区域。我修改了在中找到的一个示例，但由于我的工作，我需要使用D3.js版本5，并且从D3版本4开始，一些方法已被其他方法取代以下是我使用D3.js v3的代码： function fillArea(){ var indexies = d3.range( items.length ); var yscale = linechart.internal.y; var xscale = linechart.internal.x; var

我试图在两条曲线（时间序列）之间阴影区域。我修改了在中找到的一个示例，但由于我的工作，我需要使用D3.js版本5，并且从D3版本4开始，一些方法已被其他方法取代

以下是我使用D3.js v3的代码：

function fillArea(){
var indexies = d3.range( items.length );
var yscale = linechart.internal.y;            
var xscale = linechart.internal.x; 

var area = d3.svg.area()
             .interpolate("linear")
             .x(function(d) {return xscale(new Date(items[d].Index)); })
             .y0(function(d) { return yscale(items[d].ymin_sd); })
             .y1(function(d) { return yscale(items[d].ymax_sd); });  

d3.select("#chart svg g").append('path')
  .datum(indexies)
  .attr('class', 'area')
  .attr('fill', 'red')
  .attr('d', area);
}

和

这是我适应D3V5的代码，有我需要的版本，但是阴影没有出现

function fillArea(){
var indexies = d3.range( items.length );
var yscale = linechart.internal.y;            
var xscale = linechart.internal.x; 

var area = d3.area()
           .curveCardinal()
           .x(function(d) {return xscale(new Date(items[d].Index)); })
           .y0(function(d) { return yscale(items[d].ymin_sd); })
           .y1(function(d) { return yscale(items[d].ymax_sd); });  

d3.select("#chart svg g").append('path')
  .datum(indexies)
  .attr('class', 'area')
  .attr('fill', 'red')
  .attr('d', area);
}

这里是适用于D3V5的

任何人都可以帮助我在代码中做错了什么

首先，我认为您可能在第二个jsiddle链接上导入了错误版本的d3.js和c3.js。js fiddle链接似乎正在导入c3和d3的旧版本，因此您的示例没有在那里运行。如果您是通过CDN导入它们，则应该使用这2个

https://d3js.org/d3.v5.min.js

及

另外，我认为不能将.area（）和.curveCardinal（）链接在一起

您只能执行以下操作：

d3.area()

或者这个

d3.curveCardinal()

如果删除.curveCardinal（），您将意识到您的代码实际上是有效的

var area = d3.area()
           .x(function(d) {return xscale(new Date(items[d].Index)); })
           .y0(function(d) { return yscale(items[d].ymin_sd); })
           .y1(function(d) { return yscale(items[d].ymax_sd); });

从d3.js v4开始，不需要

.interpolate（'linear'）

，因为默认情况下是线性插值。

首先，我认为您可能在第二个JSFIDLE链接上导入了错误版本的d3.js和c3.js。js fiddle链接似乎正在导入c3和d3的旧版本，因此您的示例没有在那里运行。如果您是通过CDN导入它们，则应该使用这2个

https://d3js.org/d3.v5.min.js

及