js使用d3库的输出不可见，但没有出现错误答案

【问题标题】：Output of js using d3 library is not visible, but no errors appearjs使用d3库的输出不可见，但没有出现错误
【发布时间】：2019-04-11 01:57:36
【问题描述】：

HI :) 我正在尝试为我的论文可视化一些数据，但这是我第一次接触 js，似乎我错过了一些东西。我想将每个数据点（每个 CNC）显示为一个圆圈，其大小取决于“CNC 长度”列中指定的值。在 x 轴上，点应该在它们在文本中的位置（这就是 x 坐标取决于“句号”的原因）。数据是tsv格式的，头部是这样的：

N	Subcorpus	Type of Article	Article	Teil	Sentence number	CNC String	CNC Length
0	biology_intros	Quant/Qual	-Lacking-warmth---Alexithymia-trait-is-related-to-warm-spe_2017_Biological-P.txt	<Intro>	8.0	multifaceted personality construct	3.0
1	biology_intros	Quant/Qual	-Lacking-warmth---Alexithymia-trait-is-related-to-warm-spe_2017_Biological-P.txt	<Intro>	11.0	alexithymia exhibit diﬃculties	3.0
2	biology_intros	Quant/Qual	-Lacking-warmth---Alexithymia-trait-is-related-to-warm-spe_2017_Biological-P.txt	<Intro>	14.0	multiple somatosensory pathways	3.0
3	biology_intros	Quant/Qual	-Lacking-warmth---Alexithymia-trait-is-related-to-warm-spe_2017_Biological-P.txt	<Intro>	35.0	open access article	3.0
4	biology_intros	Quant/Qual	-Lacking-warmth---Alexithymia-trait-is-related-to-warm-spe_2017_Biological-P.txt	<Intro>	68.0	heat pain threshold	3.0
5	biology_intros	Quant/Qual	-Lacking-warmth---Alexithymia-trait-is-related-to-warm-spe_2017_Biological-P.txt	<Intro>	75.0	emotion recognition impairment	3.0
6	biology_intros	Quant/Qual	-Lacking-warmth---Alexithymia-trait-is-related-to-warm-spe_2017_Biological-P.txt	<Middle>	97.0	lower TAS quartile	3.0
7	biology_intros	Quant/Qual	-Lacking-warmth---Alexithymia-trait-is-related-to-warm-spe_2017_Biological-P.txt	<Middle>	99.0	upper TAS quartile	3.0
8	biology_intros	Quant/Qual	-Lacking-warmth---Alexithymia-trait-is-related-to-warm-spe_2017_Biological-P.txt	<Middle>	132.0	warm threshold test	3.0
9	biology_intros	Quant/Qual	-Lacking-warmth---Alexithymia-trait-is-related-to-warm-spe_2017_Biological-P.txt	<Middle>	138.0	Pinprick pain threshold	3.0
10	biology_intros	Quant/Qual	-Lacking-warmth---Alexithymia-trait-is-related-to-warm-spe_2017_Biological-P.txt	<Middle>	139.0	laser stimulation device	3.0
11	biology_intros	Quant/Qual	-Lacking-warmth---Alexithymia-trait-is-related-to-warm-spe_2017_Biological-P.txt	<Middle>	155.0	numberintensity stimulus trials	4.0
12	biology_intros	Quant/Qual	-Lacking-warmth---Alexithymia-trait-is-related-to-warm-spe_2017_Biological-P.txt	<Middle>	155.0	numberintensity stimulus trials	4.0
13	biology_intros	Quant/Qual	-Lacking-warmth---Alexithymia-trait-is-related-to-warm-spe_2017_Biological-P.txt	<Middle>	167.0	orientation discrimination threshold	3.0
14	biology_intros	Quant/Qual	-Lacking-warmth---Alexithymia-trait-is-related-to-warm-spe_2017_Biological-P.txt	<Middle>	168.0	largest ridge width	3.0
15	biology_intros	Quant/Qual	-Lacking-warmth---Alexithymia-trait-is-related-to-warm-spe_2017_Biological-P.txt	<Middle>	194.0	stimulation duration constant	3.0
16	biology_intros	Quant/Qual	-Lacking-warmth---Alexithymia-trait-is-related-to-warm-spe_2017_Biological-P.txt	<Middle>	212.0	ulna styloid process	3.0
17	biology_intros	Quant/Qual	-Lacking-warmth---Alexithymia-trait-is-related-to-warm-spe_2017_Biological-P.txt	<Middle>	216.0	heartbeat perception task	3.0
18	biology_intros	Quant/Qual	-Lacking-warmth---Alexithymia-trait-is-related-to-warm-spe_2017_Biological-P.txt	<Middle>	222.0	heartbeat perception score	3.0
19	biology_intros	Quant/Qual	-Lacking-warmth---Alexithymia-trait-is-related-to-warm-spe_2017_Biological-P.txt	<Middle>	222.0	heartbeat perception intervals	3.0
20	biology_intros	Quant/Qual	-Lacking-warmth---Alexithymia-trait-is-related-to-warm-spe_2017_Biological-P.txt	<Middle>	225.0	heartbeat detection task	3.0
21	biology_intros	Quant/Qual	-Lacking-warmth---Alexithymia-trait-is-related-to-warm-spe_2017_Biological-P.txt	<Middle>	233.0	somatosensory detection threshold	3.0
22	biology_intros	Quant/Qual	-Lacking-warmth---Alexithymia-trait-is-related-to-warm-spe_2017_Biological-P.txt	<Middle>	235.0	detection threshold intensities	3.0
23	biology_intros	Quant/Qual	-Lacking-warmth---Alexithymia-trait-is-related-to-warm-spe_2017_Biological-P.txt	<Middle>	260.0	heat pain threshold	3.0
24	biology_intros	Quant/Qual	-Lacking-warmth---Alexithymia-trait-is-related-to-warm-spe_2017_Biological-P.txt	<Middle>	281.0	thermal detection test	3.0
25	biology_intros	Quant/Qual	-Lacking-warmth---Alexithymia-trait-is-related-to-warm-spe_2017_Biological-P.txt	<Middle>	309.0	further linear regression	3.0
26	biology_intros	Quant/Qual	-Lacking-warmth---Alexithymia-trait-is-related-to-warm-spe_2017_Biological-P.txt	<Middle>	318.0	strong group diﬀerence	3.0
27	biology_intros	Quant/Qual	-Lacking-warmth---Alexithymia-trait-is-related-to-warm-spe_2017_Biological-P.txt	<Middle>	330.0	Mean pleasantness ratings	3.0
28	biology_intros	Quant/Qual	-Lacking-warmth---Alexithymia-trait-is-related-to-warm-spe_2017_Biological-P.txt	<Conclusion>	342.0	emotion recognition diﬃculties	3.0
29	biology_intros	Quant/Qual	-Lacking-warmth---Alexithymia-trait-is-related-to-warm-spe_2017_Biological-P.txt	<Conclusion>	351.0	null result cannot rule	4.0
30	biology_intros	Quant/Qual	-Lacking-warmth---Alexithymia-trait-is-related-to-warm-spe_2017_Biological-P.txt	<Conclusion>	354.0	warmth perception threshold	3.0
31	biology_intros	Quant/Qual	-Lacking-warmth---Alexithymia-trait-is-related-to-warm-spe_2017_Biological-P.txt	<Conclusion>	371.0	speciﬁc receptor types	3.0
32	biology_intros	Quant/Qual	-Lacking-warmth---Alexithymia-trait-is-related-to-warm-spe_2017_Biological-P.txt	<Conclusion>	373.0	warmstimulus dimensions	3.0
33	biology_intros	Quant/Qual	-Lacking-warmth---Alexithymia-trait-is-related-to-warm-spe_2017_Biological-P.txt	<Conclusion>	383.0	physical warmthalsoOur study	3.0
34	biology_intros	Quant/Qual	-Lacking-warmth---Alexithymia-trait-is-related-to-warm-spe_2017_Biological-P.txt	<Conclusion>	396.0	c-tactile mechanoreceptor pathway	3.0
35	biology_intros	Quant/Qual	-Lacking-warmth---Alexithymia-trait-is-related-to-warm-spe_2017_Biological-P.txt	<Conclusion>	398.0	aﬀective touch test	3.0
36	biology_intros	Quant/Qual	-Lacking-warmth---Alexithymia-trait-is-related-to-warm-spe_2017_Biological-P.txt	<Conclusion>	406.0	pleasantness ratings overall	3.0
37	biology_intros	Quant/Qual	-Lacking-warmth---Alexithymia-trait-is-related-to-warm-spe_2017_Biological-P.txt	<Conclusion>	410.0	body mass index	3.0
38	biology_intros	Quant/Qual	-Lacking-warmth---Alexithymia-trait-is-related-to-warm-spe_2017_Biological-P.txt	<Conclusion>	412.0	aﬀective touch test	3.0
267	biology_intros	Quant/Qual	Deficient-prepulse-inhibition-of-the-startle-reflex-in-sch_2017_Biological-P.txt	<Intro>	1.0	human startle response	3.0
268	biology_intros	Quant/Qual	Deficient-prepulse-inhibition-of-the-startle-reflex-in-sch_2017_Biological-P.txt	<Intro>	2.0	eye blink reﬂex	3.0
269	biology_intros	Quant/Qual	Deficient-prepulse-inhibition-of-the-startle-reflex-in-sch_2017_Biological-P.txt	<Intro>	2.0	body startle reﬂex	3.0
270	biology_intros	Quant/Qual	Deficient-prepulse-inhibition-of-the-startle-reflex-in-sch_2017_Biological-P.txt	<Middle>	91.0	Neurobehavioralelectrocutaneous stimuli	3.0
271	biology_intros	Quant/Qual	Deficient-prepulse-inhibition-of-the-startle-reflex-in-sch_2017_Biological-P.txt	<Middle>	120.0	stimulusonset asynchrony	3.0
272	biology_intros	Quant/Qual	Deficient-prepulse-inhibition-of-the-startle-reflex-in-sch_2017_Biological-P.txt	<Middle>	134.0	EMG data processing	3.0
273	biology_intros	Quant/Qual	Deficient-prepulse-inhibition-of-the-startle-reflex-in-sch_2017_Biological-P.txt	<Conclusion>	241.0	Disclosure statement None	3.0

代码如下：

var w = 600;
var h = 300;
d3.tsv("df.tsv", function(d) {
	return{
		Sentence_number : +d["Sentence number"],
		CNC_Length : +d["CNC Length"],
		article : d.Article,
		part: d.Teil
	};
	
}, function(data){
	var padding = 20;
	var rScale = d3.scaleLinear()
				//.domain([3, d3.max(data, function(d) { return d["CNC Length"]; })])
				.domain([3, 7])
				.range([2, 40]);
	var xScale = d3.scaleLinear()
				//.domain([0, d3.max(data, function(d) { return d["Sentence number"]; })]) //input domain
				.domain([0, 1000]) //input domain
				.range([padding, w-padding*2]); //output range
	var canv = d3.select("body").append("svg")
			.attr("width", w)
			.attr("height", h)
	canv.selectAll("circle")
		.data(data)
		.filter(function(d) { return (d["Article"] == "Deficient-prepulse-inhibition-of-the-startle-reflex-in-sch_2017_Biological-P.txt") })
		.enter()
		.append("circle")
		.attr("cx", function(d) {
			return xScale(d["Sentence number"]);
			})
		.attr("cy", h/2)
		.attr("fill", function(d) {
			return "rgb(255, 0, " + d["CNC Length"] * 10 + ", 0.75)";
			})
		.attr("r", function(d) {
			return rScale(d["CNC Length"]);
		})
});

问题是我在控制台中没有看到任何错误，屏幕上也没有出现任何内容（我尝试使用人工数据在 js 中手动创建它并且它有效，但是当我导入数据时出现问题）。

如果有任何建议，我将不胜感激：)

【问题讨论】：

在回调中将data 转储到控制台时是什么样子？
你使用的是什么版本的 D3？
@altocumulus，我用的是这个：d3js.org/d3.v4.min.js
console.log(data);给出了这个：（2286）[{...}，...] [0 ... 99] 0：CNC_Length：3 Sentence_number：8 文章：“-缺乏温暖---Alexithymia-trait-is-related-to-warm-spe_2017_Biological- P.txt”部分：“”proto：对象 1：{Sentence_number：11，CNC_Length：3，文章：“-Lacking-warmth---Alexithymia-trait-is-related- to-warm-spe_2017_Biological-P.txt", part: ""} 2: {Sentence_number: 14, CNC_Length: 3, article: "-Lacking-warmth---....等等

标签： javascript d3.js data-visualization

【解决方案1】：

感谢您的提示！我发现了我的错误！我用它们的旧名称来寻址列，即我应该使用 d.article 而不是 d.Article，d.CNC_Length 而不是 d["CNC Length"] 等等，因为我有数组中列的名称与我的 tsv 中的调用方式不同，因为我在这里更改它们：

return{
    Sentence_number : +d["Sentence number"],
    CNC_Length : +d["CNC Length"],
    article : d.Article,
    part: d.Teil
};

此外，过滤器存在问题。它应该在我选择数据的地方使用，即：

canv.selectAll("circle")
    .data(data.filter(function(d) { return (d.article === "Chronic-traumatic-stress-impairs-memory-in-mice--Potential-ro_2017_Behaviour.txt") }))
    .enter()

现在一切正常，我正在进一步开发它:)

【讨论】：