我有一个指示国家/地区的单选按钮列表。 我希望当用户点击单选按钮时,会加载右边的折线图。 为此,我有4个csv文件,其中包含每个国家/地区的数据。
csv文件是这样的:
year,death,value
2012,Tuberculosis,NA
2011,Tuberculosis,NA
2010,Tuberculosis,301
2009,Tuberculosis,344
2008,Tuberculosis,333
2007,Tuberculosis,329
2006,Tuberculosis,350
2005,Tuberculosis,NA
2004,Tuberculosis,NA
2003,Tuberculosis,396
2002,Tuberculosis,413
2001,Tuberculosis,415
2000,Tuberculosis,460
1999,Tuberculosis,517
1998,Tuberculosis,558
1997,Tuberculosis,597
1996,Tuberculosis,609
1995,Tuberculosis,647
2012,Tetanus,NA
2011,Tetanus,NA
2010,Tetanus,17
2009,Tetanus,27
2008,Tetanus,18
...
HERE是我的代码。 我不知道为什么Plunker会创建错误" 错误请求"。
无论如何,这是我的结果:如果用户点击意大利,那么浏览器加载Italy.csv文件并创建图表,如果用户点击匈牙利,则浏览器加载Hungary.csv文件并创建图表等等上。
问题是在我的csv文件中,有一些"漏洞"关于数据。 例如,我没有关于2003年至2006年期间意大利死亡人数的任何数据,因此我想显示虚线而不是实线。 在我的图表中,我无法做到这一点。 特别是,我编写代码来做到这一点,但它不起作用。 请注意,缺少的数据将根据国家/地区而变化。对于某些国家/地区,我拥有所有数据而非其他国家/地区。
此外,如果用户点击相应系列的圆圈(图例)消失,则圆圈应变为白色,轴将更改为适合当前数据。 这不起作用,我不明白为什么。
如您所见,控制台不会显示任何错误。
在这个类似的例子中,它有效:PLUNKER
我严厉地解释了自己。使用"缺少数据"我的意思是NA值。
我理解比利时的图表是对的。 我试图理解为什么丹麦图表是这样的但很抱歉,当你说" Code为每个可用数据生成多个路径并且只为所有NA数据生成一条路径时,我不明白。相反,它必须为数据上的每个间隙生成一个段。"。
代码以这种方式组织:
// some code...
/**************************************************************************
*** GET SELECTED COUNTRY AND DRAW FIRST CHART ****************************
**************************************************************************/
var l_selectedCountry = document.querySelector('input[name="l_country"]:checked').value;
l_createLineChart(l_selectedCountry);
var l_updateradio = function() {
l_selectedCountry = $('input[name=l_country]:checked', '#l_countries').val();
l_createLineChart(l_selectedCountry);
}
$("#l_countries").on("change", l_updateradio);
/**************************************************************************
*** DRAW THE RIGHT CHART BASED ON SELECTED COUNTRY **********************
**************************************************************************/
function l_createLineChart(l_selectedCountry) {
// remove last chart
d3.select("#l_chartcontainer")
.html("");
// adds the svg canvas
var svg = d3.select("#l_chartcontainer")
.append("svg")
.attr("width", l_width + margin.left + margin.right)
.attr("height", l_height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var l_file = "./data/line_data/" + l_selectedCountry + ".csv";
/**************************************************************************
*** GET RIGHT DATA ********************************************************
**************************************************************************/
d3.csv(l_file, function(l_error, l_data) {
l_data.forEach(function(d) {
d.year = parseDate(d.year);
d.value = +d.value;
});
// code about axis...
/**************************************************************************
*** GET ALL LINE DATA (solid & dashed) ************************************
**************************************************************************/
var l_dataNest = d3.nest()
.key(function(d) {
return d.death;
})
.entries(l_data);
console.log("l_dataNest");
console.log(l_dataNest);
// code about labels...
/**************************************************************************
*** GET DASHED LINE DATA **************************************************
**************************************************************************/
var l_dashedData = l_getDashed(l_dataNest); // dashed line (extreme point) for each disease
console.log("l_dashedData");
console.log(l_dashedData);
// other code...
/**************************************************************************
*** DRAW SOLID LINE *******************************************************
**************************************************************************/
svg.append('g')
.attr('class', 'l_line-container')
.selectAll('.normal-line-paths')
.data(l_dataNest) // set our data
.enter() // enter the data and start appending elements
.append('path')
.call(l_path); // calling our path function for later use when appending lines
/**************************************************************************
*** DRAW DASHED LINE ******************************************************
**************************************************************************/
svg.append('g')
.attr('class', 'dashed-line-container')
.selectAll('.dashed-line-paths')
.data(l_dashedData)
.enter()
.append('path')
.call(l_dashedPath);
// other code...
});
}
// code about event...
function l_path(myPath) {
myPath.style("fill", "none")
.style("stroke", function(d) {
return l_color[d.key];
})
.attr('class', function(d) {
return 'normal-line-paths path-' + d.key.replace(/\s+/g, '');
})
.attr("d", function(d) {
return valueline(d.values);
})
.style("opacity", 0.5)
.on("mouseover", l_onMouseOverLine)
.on("mouseout", l_onMouseOutLine);
}
function l_dashedPath(myPath) {
myPath.style("fill", "none")
.style("stroke", function(d) {
return l_color[d.key];
})
.style("stroke-width", 5)
.attr("stroke-dasharray", '4')
.attr('class', function(d) {
return 'dashed-line-paths path-' + d.key.replace(/\s+/g, '');
})
.attr("d", function(d) {
return valueline(d.values);
})
.style("opacity", 0.5)
.on("mouseover", l_onMouseOverLine)
.on("mouseout", l_onMouseOutLine);
}
/**
* Function to return the data points that will create the dashed lines.
*/
function l_getDashed(data) {
return data.map(function(collection, index) {
var l_startNaN = false;
var l_dashed = {
key: collection.key, // disease
values: [] //array of death, death and year
};
collection.values.forEach(function(dataPoint, index) {
var l_value = dataPoint.value;
var values = collection.values;
if($.isNumeric(l_value) && l_startNaN) {
l_startNaN = false;
l_dashed.values.push(values[index]);
}
else {
if(($.isNumeric(l_value) && l_startNaN) || (!$.isNumeric(l_value) && !l_startNaN)) {
l_startNaN = true;
l_dashed.values.push(values[index-1]);
}
}
})
if((l_dashed.values.length % 2)) {
l_dashed.values.pop();
}
return l_dashed;
});
}
如果我评论这段代码:
// apend a group element which will contain our dashed lines
/*svg.append('g')
.attr('class', 'dashed-line-container')
.selectAll('.dashed-line-paths')
.data(l_dashedData)
.enter()
.append('path')
.call(l_dashedPath);*/
我明白了:
如果我发表评论:
// apend a group element which will contain our lines
/*svg.append('g')
.attr('class', 'l_line-container')
.selectAll('.normal-line-paths')
.data(l_dataNest) // set our data
.enter() // enter the data and start appending elements
.append('path')
.call(l_path); */
我明白了:
因此l_dashedPath(myPath)
方法一定存在问题。
但是如果我打印d
,我会得到两个部分的四个末端(TBerculosis):23,32,15,16是正确的。
.attr("d", function(d) {
console.log(d);
return valueline(d.values);
})
l_getDashed(data)
方法对我来说也是正确的。
答案 0 :(得分:1)
在Plunker内,你不能在文件名上有空格。将其'United Kingdom.csv'
重命名为带下划线(_)左右的内容。 "United_Kingdom.csv"
你的函数l_getdashed,不要为每个虚线段取下一个点。最后,你得到一个点,而不是一个片段。
我重新重构你的功能:
function l_getDashed(data) {
return data.map(function(collection, index) {
var l_startNaN = false;
var l_dashed = {
key: collection.key,
values: []
};
collection.values.forEach(function(dataPoint, index) {
var l_value = dataPoint.value;
var values = collection.values;
if ($.isNumeric(l_value) && l_startNaN) {
l_startNaN = false;
l_dashed.values.push(values[index]);
} else if ( !$.isNumeric(l_value) !== l_startNaN) {
l_startNaN = true
l_dashed.values.push(values[index-1]);
}
})
if (l_dashed.values.length % 2) { l_dashed.values.pop() }
return l_dashed;
});
}
<强>丹麦强>
您的代码存在概念错误。这就是为什么你看到丹麦&#39;那样的。
图形:
Here the update working Plunker
代码为每个可用数据生成多个路径,并为所有NA数据生成一个路径。相反,它必须为数据上的每个间隙生成一个段.-
<强>比利时强>
Belguim是一个不同的历史。图表没问题,你的数据有孤立点(红点),不能解散。
您无法在1997 - 2009年绘制虚线(黑色箭头),因为您将丢弃数据。