0
我正在D3中使用多行折線圖（版本4），並且遇到了一些麻煩。以下是我與我當前的代碼獲得：D3 Stack Line Chart
我認爲這是與我的X規模，但我無法弄清楚什麼是錯的。我一直在遵循教程here，稍作修改，因爲我正在使用V4。任何幫助將不勝感激。
var parseDate = d3.timeParse("%Y");
var color = d3.scaleOrdinal(["#969FFD","#7173BF","#4B4C7F","#262640", "red"]);
var mySvg = d3.select("#chart8").append('svg')
.attr('width', width + margin.right + margin.left)
.attr('height', height + margin.bottom + margin.top)
var chartGroup = mySvg.append("g")
.attr("class","fullGroup")
.attr("transform", "translate("+margin.left+","+margin.top+")");
var parseDate = d3.timeParse("%Y");
d3.csv("../Assets/datasets/allDrugs3.csv", function(error, data){
if (error) throw error;
// FORMAT THE DATA //
var labelVar = "year";
var varNames = d3.keys(data[0]).slice(1);
// Alternatively --> .filter(function(key){ return key !== labelVar;})
console.log(varNames); // <-- Names of drugs, used for color array
// Add color domain of names
color.domain(varNames);
var seriesData = varNames.map(function(name){
return {
name: name,
values: data.map(function(d) {
return { name: name, label: parseDate(d[labelVar]), value: +d[name]};
})
};
});
console.log(seriesData);
// Y-SCALE //
var yScale = d3.scaleLinear()
.domain([
d3.min(seriesData, function(c){
return d3.min(c.values, function(d){ return d.value; });
}),
d3.max(seriesData, function(c){
return d3.max(c.values, function(d){ return d.value;});
})
])
.range([height, 0]);
console.log(
"The y domain is",
d3.min(seriesData, function(c){
return d3.min(c.values, function(d){ return d.value; })}),
"to",
d3.max(seriesData, function(c){
return d3.max(c.values, function(d){ return d.value;});
}));
// X-SCALE //
var xYears = data.map(function(d){return parseDate(d.year);});
var xScale = d3.scaleTime()
.domain(xYears)
.range([0, width]);
console.log(
"The x domain is",
xYears
)
var series = chartGroup.selectAll(".series")
.data(seriesData)
.enter().append("g")
.attr("class","series");
var line = d3.line()
.x(function(d){return xScale(d.label)})
.y(function(d){return yScale(d.value); })
.curve(d3.curveCardinal);
series.append("path")
.attr("d", function(d){ return line(d.values); })
.style("stroke", function (d) { return color(d.name); })
.style("stroke-width", "4px")
.style("fill", "none");
// Axes
var yAxis = d3.axisLeft(yScale).ticks(5).tickPadding(5);
var xAxis = d3.axisBottom(xScale).ticks(10);
chartGroup.append("g")
.attr("class","Xaxis")
.call(xAxis)
.attr("transform","translate(0,"+height+")")
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-65)");
chartGroup.append("g")
.attr("class","Yaxis")
.call(yAxis)
.selectAll("text")
.style("text-anchor", "middle")
.attr("dy", "-1em")
.attr("transform", "rotate(-90)");
});
這裏的數據：
key,deaths,year
heroin,289,2007
heroin,360,2008
heroin,238,2009
heroin,247,2010
heroin,392,2011
heroin,399,2012
heroin,464,2013
heroin,578,2014
heroin,748,2015
heroin,1212,2016
opiods,280,2007
opiods,251,2008
opiods,311,2009
opiods,342,2010
opiods,311,2011
opiods,302,2012
opiods,316,2013
opiods,330,2014
opiods,351,2015
opiods,418,2016
alchohol,175,2007
alchohol,162,2008
alchohol,160,2009
alchohol,161,2010
alchohol,195,2011
alchohol,187,2012
alchohol,238,2013
alchohol,270,2014
alchohol,310,2015
alchohol,582,2016
benzodiazepine,48,2007
benzodiazepine,52,2008
benzodiazepine,58,2009
benzodiazepine,68,2010
benzodiazepine,73,2011
benzodiazepine,37,2012
benzodiazepine,69,2013
benzodiazepine,103,2014
benzodiazepine,91,2015
benzodiazepine,126,2016
cocaine,157,2007
cocaine,162,2008
cocaine,135,2009
cocaine,148,2010
cocaine,153,2011
cocaine,248,2012
cocaine,154,2013
cocaine,198,2014
cocaine,221,2015
cocaine,463,2016