时间戳

首页 > 解决方案 > 使用 D3.js v5 在两条曲线之间着色

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

问题描述

我试图遮蔽两条曲线（时间序列）之间的区域。我改编了一个在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);
}

这是适用于 D3 v5的jsfiddle 。

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

标签： javascriptd3.js

解决方案

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

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')，因为默认情况下是线性插值。

推荐阅读