Svg 如何在d3.js中添加面积图任意两点之间的非线性曲线

我最近开始学习d3.js。我正在d3中制作一个堆积面积图，它看起来类似于下图，

我有一个要求，能够添加任何两点之间的非线性曲线。为了解释我的观点，我做了一个非常基本的大纲图。

---

我尝试使用curve函数，但它将整条线更改为提供的曲线（这里是示例代码），我只需要在两点之间添加一条非线性曲线。有什么方法可以实现这一点吗？

我通过消除以下方面的精度简化了您的路径：

您可以使用该编辑器玩d-path，并了解要在哪里/如何更改该d-path字符串

复制下面的d路径并将其粘贴到：

---

我通过删除以下内容中的精度简化了您的路径：

您可以使用该编辑器玩d-path，并了解要在哪里/如何更改该d-path字符串

复制下面的d路径并将其粘贴到：

---

只需更改曲线类型即可。曲线基近似于点之间的曲线，但不与点交叉。因此，可以使用通常使用的“curveCardinal”类型，也可以使用“curveCardinal”类型，即通过数据点的曲线

//伪数据
常数数据=[
{
年份：2000年，
aData:50，
英国数据：300
},
{
年份：2001年，
aData:150，
b数据：50
},
{
年份：2002年，
aData:200，
b数据：100
},
{
年份：2003年，
aData:130，
b数据：50
},
{
年份：2004年，
aData:240，
b数据：80
},
{
年份：2005年，
aData:380，
b数据：10
},
{
年份：2006年，
aData:420，
b数据：200
}
];
常量颜色=[“浅绿色”、“浅蓝色”]；
//为图表创建SVG和填充
常量svg=d3
.选择（“图表”）
.append（“svg”）
.attr（“高度”，300）
.attr（“宽度”，600）；
常数冲程宽度=1.5；
常量边距={top:0，bottom:20，left:30，right:20}；
const chart=svg.append（“g”）.attr（“transform”，translate（${margin.left}，0）`）；
常量宽度=+svg.attr（“宽度”）-margin.left-margin.right-strokeWidth*2；
常量高度=+svg.attr（“高度”）-margin.top-margin.bottom；
常量grp=图表
.附加（“g”）
.attr（“transform”，“translate”（${margin.left-strokeWidth}，-${margin.top}）`）；
//创建堆栈
常量堆栈=d3.stack（）.keys（[“aData”，“bData”]）；
常量stackedValues=堆栈（数据）；
常数stackedData=[]；
//将堆栈偏移复制回数据中。
stackedValues.forEach（（层，索引）=>{
const currentStack=[]；
层。forEach（（d，i）=>{
currentStack.push({
价值观：d，
年份：数据[i]。年份
});
});
stackedData.push（currentStack）；
});
//创建比例
常数yScale=d3
.scaleLinear（）
.范围（[高度，0]）
.domain（[0，d3.max（stackedValues[stackedValues.length-1]，dp=>dp[1]））；
常数xScale=d3
.scaleLinear（）
.范围（[0，宽度]）
.domain（d3.extent（data，dataPoint=>dataPoint.year））；
常数面积=d3
1.区域（）
.x（dataPoint=>xScale（dataPoint.year））
.y0（dataPoint=>yScale（dataPoint.values[0]））
.y1（dataPoint=>yScale（dataPoint.values[1]））
//.曲线（d3.曲线基）
.曲线（d3.曲线中心）
//.曲线（d3.曲线A（0.5））
;
常数系列=grp
.selectAll（“.series”）
.数据（stackedData）
.输入（）
.附加（“g”）
.attr（“类别”、“系列”）；
系列
.append（“路径”）
.attr（“transform”，translate（${margin.left}，0）`）
.style（“填充”（d，i）=>颜色[i]）
.attr（“笔划”、“钢蓝”）
.attr（“笔划线条连接”、“圆形”）
.attr（“笔划线头”、“圆形”）
.attr（“笔划宽度”，笔划宽度）
.attr（“d”，d=>面积（d））；
const dotsGreen=图表
.selectAll（“.gdot”）
.数据（数据）
.输入（）
.附加（“圆圈”）
.attr（“类别”、“gdot”）
.attr（“cx”，函数（d）{
返回xScale（d.year）
})
.attr（“cy”，d=>yScale（d.aData））
.attr（“r”，4）
.attr（“填充”、“绿色”）；
const dotsBlue=图表
.selectAll（“.bdot”）
.数据（数据）
.输入（）
.附加（“圆圈”）
.attr（“类别”、“bdot”）
.attr（“cx”，函数（d）{
返回xScale（d.year）
})
.attr（“cy”，d=>yScale（d.aData+d.bData））
.attr（“r”，4）
.attr（“填充”、“蓝色”）；
//添加X轴
图表
.附加（“g”）
.attr（“transform”，`translate（0，${height}）`）
.call（d3.axisBottom（xScale.ticks（data.length））；
//添加Y轴
图表
.附加（“g”）
.attr（“transform”，`translate（0，0）`）
.call（d3.axisLeft（yScale））
#图表{
文本对齐：居中；
边缘顶端：40px；
}
只需更改曲线类型即可。曲线基近似于点之间的曲线，但不与点交叉。因此，可以使用通常使用的“curveCardinal”类型，也可以使用“curveCardinal”类型，即通过数据点的曲线


//伪数据
常数数据=[
{
年份：2000年，
aData:50，
英国数据：300
},
{
年份：2001年，
aData:150，
b数据：50
},
{
年份：2002年，
aData:200，
b数据：100
},
{
年份：2003年，
aData:130，
b数据：50
},
{
年份：2004年，
aData:240，
b数据：80
},
{
年份：2005年，
aData:380，
b数据：10
},
{
年份：2006年，
aData:420，
b数据：200
}
];
常量颜色=[“浅绿色”、“浅蓝色”]；
//为图表创建SVG和填充
常量svg=d3
.选择（“图表”）
.append（“svg”）
.attr（“高度”，300）
.attr（“宽度”，600）；
常数冲程宽度=1.5；
常量边距={top:0，bottom:20，left:30，right:20}；
const chart=svg.append（“g”）.attr（“transform”，translate（${margin.left}，0）`）；
常量宽度=+svg.attr（“宽度”）-margin.left-margin.right-strokeWidth*2；
常量高度=+svg.attr（“高度”）-margin.top-margin.bottom；
常量grp=图表
.附加（“g”）
.attr（“transform”，“translate”（${margin.left-strokeWidth}，-${margin.top}）`）；
//创建堆栈
常量堆栈=d3.stack（）.keys（[“aData”，“bData”]）；
常量stackedValues=堆栈（数据）；
常数stackedData=[]；
//将堆栈偏移复制回数据中。
stackedValues.forEach（（层
const stack = d3.stack().keys(["aData", "bData"]);
const stackedValues = stack(data);
const stackedData = [];

stackedValues.forEach((layer, index) => {
  const currentStack = [];
  layer.forEach((d, i) => {
  currentStack.push({
   values: d,
   year: data[i].year
  });
});
 stackedData.push(currentStack);
 });


      const yScale = d3
.scaleLinear()
.range([height, 0])
.domain([0, d3.max(stackedValues[stackedValues.length - 1], dp => dp[1])]);
const xScale = d3
       .scaleLinear()
       .range([0, width])
       .domain(d3.extent(data, dataPoint => dataPoint.year));

 const area = d3
             .area()
            .x(dataPoint => xScale(dataPoint.year))
            .y0(dataPoint => yScale(dataPoint.values[0]))
            .y1(dataPoint => yScale(dataPoint.values[1]));

    const series = grp
       .selectAll(".series")
       .data(stackedData)
       .enter()
      .append("g")
      .attr("class", "series");

   series
    .append("path")
     .attr("transform", `translate(${margin.left},0)`)
    .style("fill", (d, i) => color[i])
    .attr("stroke", "steelblue")
   .attr("stroke-linejoin", "round")
   .attr("stroke-linecap", "round")
  .attr("stroke-width", strokeWidth)
 .attr("d", d => area(d));