javascript - How do I set a different range for line chart embedded in a bar chart using d3.js
问题描述
I have a simple bar chart showing data by year. Over top, I am making a line chart representing another data point over the same time. However, I don't have data for the line chart from the final year.
[Here is an image of the graph so far.][1]
As you'll see, this graph makes it look like unemployment numbers in the final year suddenly dropped.
For this line chart, where would I change the range of data I want the line to be drawn over.
Here is my d3.js for the line chart:
var margin = {top: 20, right: 35, bottom: 30, left: 40},
width = 600,
height = 400;
var xScale = d3.scaleBand()
.rangeRound([0, width])
.padding(0.1)
.domain(dataset.map(function(d) {
return d.Year;
}));
yScale = d3.scaleLinear()
.rangeRound([height, 0])
.domain([0, d3.max(dataset, (function (d) {
return d.SYEP_Enrollment;
}))]);
yLineScale = d3.scaleLinear()
.rangeRound([height, 0])
.domain([0, d3.max(dataset, (function (d) {
return d.Teen_Unemployment;
}))]);
var svg = d3.select(".bar-chart-wrapper svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// axis-x
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(xScale));
// axis-y
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(yScale));
// axis-y for the line
g.append("g")
.attr("class", "axis axis--y")
.attr('transform',`translate(${width},0)`)
.call(d3.axisRight(yLineScale));
var bar = g.selectAll("rect")
.data(dataset)
.enter().append("g");
// bar chart
bar.append("rect")
.attr("x", function(d) { return xScale(d.Year); })
.attr("y", function(d) { return yScale(d.SYEP_Enrollment); })
.attr("width", xScale.bandwidth())
.attr("height", function(d) { return height - yScale(d.SYEP_Enrollment);})
.attr('class','bar')
// labels on the bar chart
bar.append("text")
.attr("dy", "1.8em")
.attr("x", function(d) { return xScale(d.Year) + xScale.bandwidth() / 2; })
.attr("y", function(d) { return yScale(d.SYEP_Enrollment); })
.attr("text-anchor", "middle")
.text(function(d) {
return d.SYEP_Enrollment;
});
// line chart
// axis-y
g.append("g")
.call(d3.axisRight(yLineScale));
var line = d3.line()
.x(function(d,i) { return xScale(d.Year) + xScale.bandwidth() / 2})
.y(function(d) { return yLineScale(d.Teen_Unemployment)})
.curve(d3.curveMonotoneX);
bar.append("path")
.attr("class", "line") // Assign a class for styling
.attr("d", line(dataset)); // 11. Calls the line generator
bar.append("circle")
.attr("class", "dot")
.attr("cx", function(d, i) { return xScale(d.Year)+ xScale.bandwidth() / 2})
.attr("cy", function(d) { return yLineScale(d.Teen_Unemployment); })
.attr("r", 5);
// labels on the line chart
bar.append("text")
.attr("x", function(d) { return xScale(d.Year) + xScale.bandwidth() / 2; })
.attr("y", function(d) { return yLineScale(d.Teen_Unemployment) - 10; })
.attr("text-anchor", "middle")
.text(function(d) {
return parseInt(d.Teen_Unemployment * 100) + '%';
});
[Here is a link to the JSON file.][2]
[1]: https://drive.google.com/open?id=1-6SW_wRVaBA70rItvuhecXSxCTgUwH2x
[2]: https://docs.google.com/document/d/1g2h934hhEA0VsXZZLcDL9oHnRLnwBCJYBCD_NdZGGXw/edit?usp=sharing
解决方案
As mentioned in the comments above the issue lies in the dataset where the final data point does not have the Teen_Unemployment
data point. As a result the last point is counted as 0 or null and the point drops to the bottom of the y-scale.
To fix this, we create a separate dataset for the line chart by eliminating any data points which have empty Teen_Unemployment
field like:
var lineData = dataset.filter(f => f.Teen_Unemployment != "");
Then we use the lineData
to map the domain of for the yLineScale
like:
var yLineScale = d3.scaleLinear()
.rangeRound([height, 0])
.domain([0, d3.max(lineData, (function (d) {
return d.Teen_Unemployment;
}))]);
Finally we create the lineChart
with the lineData
like so:
g.append("g")
.call(d3.axisRight(yLineScale));
var line = d3.line()
.x(function(d,i) { return xScale(d.Year) + xScale.bandwidth() / 2})
.y(function(d) { return yLineScale(d.Teen_Unemployment)})
.curve(d3.curveMonotoneX);
let lineChart = g.append('g')
.attr('class', 'lineChart')
;
lineChart.append("path")
.attr("class", "line") // Assign a class for styling
.attr("d", line(lineData)); // 11. Calls the line generator
lineChart.selectAll('circle').data(lineData).enter().append("circle")
.attr("class", "dot")
.attr("cx", function(d, i) { return xScale(d.Year)+ xScale.bandwidth() / 2})
.attr("cy", function(d) { return yLineScale(d.Teen_Unemployment); })
.attr("r", 5);
// labels on the line chart
lineChart.selectAll('text').data(lineData).enter().append("text")
.attr("x", function(d) { return xScale(d.Year) + xScale.bandwidth() / 2; })
.attr("y", function(d) { return yLineScale(d.Teen_Unemployment) - 10; })
.attr("text-anchor", "middle")
.text(function(d) {
return parseInt(d.Teen_Unemployment * 100) + '%';
});
Working example:
var dataset = [
{
"Year": 2007,
"SYEP_Enrollment": 41650,
"Teen_Unemployment": .330
},
{
"Year": 2008,
"SYEP_Enrollment": 41804,
"Teen_Unemployment": .302
},
{
"Year": 2009,
"SYEP_Enrollment": 43113,
"Teen_Unemployment": .308
},
{
"Year": 2010,
"SYEP_Enrollment": 52255,
"Teen_Unemployment": .325
},
{
"Year": 2011,
"SYEP_Enrollment": 35725,
"Teen_Unemployment": .383
},
{
"Year": 2012,
"SYEP_Enrollment": 30628,
"Teen_Unemployment": .399
},
{
"Year": 2013,
"SYEP_Enrollment": 29416,
"Teen_Unemployment": .408
},
{
"Year": 2014,
"SYEP_Enrollment": 35957,
"Teen_Unemployment": .369
},
{
"Year": 2015,
"SYEP_Enrollment": 47126,
"Teen_Unemployment": .357
},
{
"Year": 2016,
"SYEP_Enrollment": 54263,
"Teen_Unemployment": .334
},
{
"Year": 2017,
"SYEP_Enrollment": 60113,
"Teen_Unemployment": .316
},
{
"Year": 2018,
"SYEP_Enrollment": 69716,
"Teen_Unemployment": .291
},
{
"Year": 2019,
"SYEP_Enrollment": 74354,
"Teen_Unemployment":""
}
];
//make a copy of the dataset for the lineChart
var lineData = dataset.filter(f => f.Teen_Unemployment != "");
var margin = {top: 20, right: 35, bottom: 30, left: 40},
width = 600,
height = 400;
var xScale = d3.scaleBand()
.rangeRound([0, width])
.padding(0.1)
.domain(dataset.map(function(d) {
return d.Year;
}));
var yScale = d3.scaleLinear()
.rangeRound([height, 0])
.domain([0, d3.max(dataset, (function (d) {
return d.SYEP_Enrollment;
}))]);
var yLineScale = d3.scaleLinear()
.rangeRound([height, 0])
.domain([0, d3.max(lineData, (function (d) {
return d.Teen_Unemployment;
}))]);
var svg = d3.select(".bar-chart-wrapper svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top +")");
// axis-x
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(xScale));
// axis-y
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(yScale));
// axis-y for the line
g.append("g")
.attr("class", "axis axis--y")
.attr('transform',`translate(${width},0)`)
.call(d3.axisRight(yLineScale));
var bar = g.selectAll("rect")
.data(dataset)
.enter().append("g");
// bar chart
bar.append("rect")
.attr("x", function(d) { return xScale(d.Year); })
.attr("y", function(d) { return yScale(d.SYEP_Enrollment); })
.attr("width", xScale.bandwidth())
.attr("height", function(d) { return height - yScale(d.SYEP_Enrollment);})
.attr('class','bar')
// labels on the bar chart
bar.append("text")
.attr("dy", "1.8em")
.attr("x", function(d) { return xScale(d.Year) + xScale.bandwidth() / 2; })
.attr("y", function(d) { return yScale(d.SYEP_Enrollment); })
.attr("text-anchor", "middle")
.text(function(d) {
return d.SYEP_Enrollment;
});
// line chart
// data filtered above
// axis-y
g.append("g")
.call(d3.axisRight(yLineScale));
var line = d3.line()
.x(function(d,i) { return xScale(d.Year) + xScale.bandwidth() / 2})
.y(function(d) { return yLineScale(d.Teen_Unemployment)})
.curve(d3.curveMonotoneX);
let lineChart = g.append('g')
.attr('class', 'lineChart')
;
lineChart.append("path")
.attr("class", "line") // Assign a class for styling
.attr("d", line(lineData)); // 11. Calls the line generator
lineChart.selectAll('circle').data(lineData).enter().append("circle")
.attr("class", "dot")
.attr("cx", function(d, i) { return xScale(d.Year)+ xScale.bandwidth() / 2})
.attr("cy", function(d) { return yLineScale(d.Teen_Unemployment); })
.attr("r", 5);
// labels on the line chart
lineChart.selectAll('text').data(lineData).enter().append("text")
.attr("x", function(d) { return xScale(d.Year) + xScale.bandwidth() / 2; })
.attr("y", function(d) { return yLineScale(d.Teen_Unemployment) - 10; })
.attr("text-anchor", "middle")
.text(function(d) {
return parseInt(d.Teen_Unemployment * 100) + '%';
});
.line {
fill-opacity: 0;
stroke: blue
}
.dot {
fill: white;
stroke: blue;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<div class="bar-chart-wrapper">
<svg></svg>
</div>
</body>
推荐阅读
- scala - Spark 流,如何在 UI 中查看 JMX 指标
- python - 如何使用 Scikit-image 将透明 png 图像与另一个图像合并
- mysql - 选择在此位置无效,期望 (
- angular - 获取表格内的值复选框
- elasticsearch - 使用 gitlab runner 在服务中运行配置命令
- ios - 将渐变颜色从一个视图控制器传递到另一个视图控制器
- r - R列表另存为引用列表
- python - 使用 cursor.executemany(query, df.itertuples(index=False)) 的 pyodbc 批量数据导入挑战
- javascript - How to dynamically print the raw value of the input with AutoNumeric js?
- scala - Scala 忽略导入的成员