Javascript 在面积图上方绘制折线图

我正在使用D3JSV5.12.0构建一个图表

我已经做了面积图，其中X轴上有变量

year

，Y轴上有变量

earth\u footprint

数据位于此链接中：

我想在面积图的顶部画一个折线图。此折线图的X轴应为可变年份，Y轴应为pop_total。

pop_total

是数据上的另一个变量

但是我不能管理如何，我看到了一些关于如何在条形图中画线的教程，但是当我适应我的代码，这是一个面积图，它不起作用

提前谢谢

CSS

HTLM

---

要显示该行，您需要一个行生成器：

const line = d3.area()
    .x(dataPoint => xScale(dataPoint.year))
    .y(dataPoint => yScale(dataPoint.pop_total));

const yScale2 = d3.scaleLinear()
    .range([height, 0])
    .domain([0, d3.max(data, dataPoint => dataPoint.pop_total)]);

但是，您的

yScale

将获得

earth\u footprint

的最大值，并且

pop\u total

值将远远超出比例。因此，您需要为该线生成器添加另一个刻度：

const line = d3.area()
    .x(dataPoint => xScale(dataPoint.year))
    .y(dataPoint => yScale(dataPoint.pop_total));

const yScale2 = d3.scaleLinear()
    .range([height, 0])
    .domain([0, d3.max(data, dataPoint => dataPoint.pop_total)]);

之后，只需附加路径：

grp.append("path")
    .attr("d", line);

现在最大的问题是，您有两种视觉编码（区域和线条），它们具有不同的比例。因此，该线需要一个附加轴。我把那工作交给你做

以下是生成的代码：

var url=”https://raw.githubusercontent.com/cvrnogueira/CODWorkData/master/database/final_data_set.json";
d3.json（url）
.then（功能（数据）{
data=data.filter（dataPoint=>dataPoint.country_code=='BRA'）；
data=data.filter（element=>element.hasOwnProperty（“地球足迹”）；
常数高度值=300；
常数宽度值=600；
//为图表创建SVG和填充
常量svg=d3
.选择（“面积图”）
.append（“svg”）
.attr（“viewBox”，0${widthValue}${heightValue}`）；
常数冲程宽度=1.5；
常量边距={
排名：0，
底数：20，
左:30,，
右：20
};
const chart=svg.append（“g”）.attr（“transform”，translate（${margin.left}，0）`）；
常量宽度=600-margin.left-margin.right-（行程宽度*2）；
常量高度=300-margin.top-margin.bottom；
常量grp=图表
.附加（“g”）
.attr（“transform”，“translate”（${margin.left-strokeWidth}，-${margin.top}）`）；
//创建比例
常数yScale=d3
.scaleLinear（）
.范围（[高度，0]）
.domain（[0，d3.max（数据，数据点=>dataPoint.earth_footprint）]）；
常数yScale2=d3
.scaleLinear（）
.范围（[高度，0]）
.domain（[0，d3.max（data，dataPoint=>dataPoint.pop_total）]；
常数xScale=d3
.scaleLinear（）
.范围（[0，宽度]）
.domain（d3.extent（data，dataPoint=>dataPoint.year））；
常数面积=d3
1.区域（）
.x（dataPoint=>xScale（dataPoint.year））
.y0（高度）
.y1（数据点=>yScale（数据点地球足迹））；
常数线=d3.面积（）
.x（dataPoint=>xScale（dataPoint.year））
.y（dataPoint=>yScale2（dataPoint.pop_total））；
//添加区域
玻璃钢
.append（“路径”）
.attr（“transform”，translate（${margin.left}，0）`）
.基准（数据）
.样式（“填充”、“浅蓝色”）
.attr（“笔划”、“钢蓝”）
.attr（“笔划线条连接”、“圆形”）
.attr（“笔划线头”、“圆形”）
.attr（“笔划宽度”，笔划宽度）
.attr（“d”，区域）；
玻璃钢
.append（“路径”）
.attr（“transform”，translate（${margin.left}，0）`）
.基准（数据）
.style（“填充”、“无”）
.attr（“笔划”、“红色”）
.attr（“笔划线条连接”、“圆形”）
.attr（“笔划线头”、“圆形”）
.attr（“笔划宽度”，笔划宽度）
.attr（“d”，行）；
//添加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））；
图表。附加（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，0-页边距。左）
.attr（“x”，0-（高度/2））
.attr（“dy”、“1em”）
.style（“文本锚定”、“中间”）
.文本（“接地数”）；
图表。附加（“文本”）
.attr（“转换”，
“平移（“+（宽度/2）+”，”+
（高度+边距。顶部+20）+“）
.style（“文本锚定”、“中间”）
.文本（“年份”）；
});
#面积图{
文本对齐：居中；
边缘顶端：40px；
}
.选择{
填充：无；
}

JS-Bin
显示需要线路生成器的线路：

const line = d3.area()
    .x(dataPoint => xScale(dataPoint.year))
    .y(dataPoint => yScale(dataPoint.pop_total));

const yScale2 = d3.scaleLinear()
    .range([height, 0])
    .domain([0, d3.max(data, dataPoint => dataPoint.pop_total)]);

但是，您的
yScale
将获得
earth\u footprint
的最大值，并且
pop\u total
值将远远超出比例。因此，您需要为该线生成器添加另一个刻度：

const line = d3.area()
    .x(dataPoint => xScale(dataPoint.year))
    .y(dataPoint => yScale(dataPoint.pop_total));

const yScale2 = d3.scaleLinear()
    .range([height, 0])
    .domain([0, d3.max(data, dataPoint => dataPoint.pop_total)]);

之后，只需附加路径：

grp.append("path")
    .attr("d", line);

现在最大的问题是，您有两种视觉编码（区域和线条），它们具有不同的比例。因此，该线需要一个附加轴。我把那工作交给你做

以下是生成的代码：


var url=”https://raw.githubusercontent.com/cvrnogueira/CODWorkData/master/database/final_data_set.json";
d3.json（url）
.then（功能（数据）{
data=data.filter（dataPoint=>dataPoint.country_code=='BRA'）；
data=data.filter（element=>element.hasOwnProperty（“地球足迹”）；
常数高度值=300；
常数宽度值=600；
//为图表创建SVG和填充
常量svg=d3
.选择（“面积图”）
.append（“svg”）
.attr（“viewBox”，0${widthValue}${heightValue}`）；
常数冲程宽度=1.5；
常量边距={
排名：0，
底数：20，
左:30,，
右：20
};
const chart=svg.append（“g”）.attr（“transform”，translate（${margin.left}，0）`）；
常量宽度=600-margin.left-margin.right-（行程宽度*2）；
常量高度=300-margin.top-margin.bottom；
常量grp=图表
.附加（“g”）
.attr（“transform”，`translate（-${margin.l