Question

我正在尝试在两条曲线（时间序列）之间着色一个区域。我改编了一个在C3.js fill area between curves上找到的示例，但是由于我的工作，我需要使用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);
}

还有jsfiddle

这是我的代码，适合我的D3 v5版本，但没有出现阴影。

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);
}

此处jsfiddle适用于D3 v5。

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

Answer 1

首先，我认为您可能在第二个jsfiddle链接上导入了错误版本的d3.js和c3.js。 js小提琴链接似乎正在导入旧版本的c3和d3，因此您的示例未在此处运行。如果要通过CDN导入它们，则应改用这两个。

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

和

https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.12/c3.min.js
https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.12/c3.min.css

此外，我认为您不能将.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')，因为默认情况下是线性插值。

使用D3.js v5

1 个答案: