实际上我正试图用D3.js制作一条图表线。我制作了x轴和y轴，但现在图表线不见了。这是我的json数据：
filterData([`{"稀疏"："Beherbergung"；，"Jahr"：2020年，"Monat"："Januar"；，"Beschaftigte"："100，3〃；，"VeraederungenzumVorjahr"："0.3〃；}，{"稀疏"："Beherbergung"；，"Jahr"：2020年，"Monat"："二月"；，"Beschaftigte"："99,7〃；，"VeraederungenzumVorjahr"："0,2〃；}，{"稀疏"："Beherbergung"；，"Jahr"：2020年，"Monat"："Maerz"；，"Beschaftigte"："96，3〃；，"VeraederungenzumVorjahr"："-5，0〃；}])；
这是我的脚本：
function filterData(data){
const beherbergungen = data.filter(
item => item.Sparte === 'Beherbergung'
);
visualiseChart(beherbergungen);
}
function visualiseChart(data){
var margin = {top: 10, right: 30, bottom: 30, left: 60},
width = 900 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3.select("#visualisationContainer")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",`translate(${margin.left},${margin.top})`);
var xAxis = d3.scaleBand()
.domain(data.map(function(d) { return d.Monat; }))
.range([0, width]);
svg.append("g")
.attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(xAxis));
var yAxis = d3.scaleLinear()
.domain([-50,50])
.range([height, 0]);
svg.append("g")
.call(d3.axisLeft(yAxis));
//curve is not displaying
var curve = svg.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "turquoise")
.attr("stroke-width", 4)
.attr("d",d3.line()
.x(data.map(function(d) {return xAxis(d.Monat);})) //here is the problem
.y(data.map(function(d) {return yAxis(d.VeraederungenzumVorjahr);}))//here is the problem
);
}
两个问题：
- Y数据VeraederungenzumVorjahr是一个字符串，需要转换为数字。在下面的回答中，我假设
0,3是0.3(使用逗号作为小数分隔符( - 您错误地呼叫了
d3.line()
<!DOCTYPE html>
<html>
<head> </head>
<body>
<script src="https://d3js.org/d3.v6.min.js"></script>
<div id="visualisationContainer"></div>
<script>
filterData([{ "Sparte": "Beherbergung", "Jahr": 2020, "Monat": "Januar", "Beschaeftigte": "100,3", "VeraederungenzumVorjahr": "0,3" }, { "Sparte": "Beherbergung", "Jahr": 2020, "Monat": "Februar", "Beschaeftigte": "99,7", "VeraederungenzumVorjahr": "0,2" }, { "Sparte": "Beherbergung", "Jahr": 2020, "Monat": "Maerz", "Beschaeftigte": "96,3", "VeraederungenzumVorjahr": "-5,0" }]);
function filterData(data) {
const beherbergungen = data.filter(
(item) => item.Sparte === 'Beherbergung'
);
visualiseChart(beherbergungen);
}
function visualiseChart(data) {
var margin = { top: 10, right: 30, bottom: 30, left: 60 },
width = 900 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3
.select('#visualisationContainer')
.append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', `translate(${margin.left},${margin.top})`);
var xAxis = d3
.scaleBand()
.domain(
data.map(function (d) {
return d.Monat;
})
)
.range([0, width]);
svg
.append('g')
.attr('transform', `translate(0, ${height})`)
.call(d3.axisBottom(xAxis));
var yAxis = d3.scaleLinear().domain([-50, 50]).range([height, 0]);
svg.append('g').call(d3.axisLeft(yAxis));
//curve is not displaying
var curve = svg
.append('path')
.datum(data)
.attr('fill', 'none')
.attr('stroke', 'turquoise')
.attr('stroke-width', 4)
.attr(
'd',
d3
.line()
.x(function (d) {
return xAxis(d.Monat);
}
)
.y(function (d) {
var value = (+(d.VeraederungenzumVorjahr.replace(",",".")));
return yAxis(value);
}
)
);
}
</script>
</body>
</html>