Вывод js с использованием библиотеки d3 не виден, но ошибок не появляется

Question

HI :) Я пытаюсь визуализировать некоторые данные для моей диссертации, но это мой первый опыт работы с js, и мне кажется, что мне не хватает чего-то. Я хотел бы показать каждую точку данных (каждый ЧПУ) в виде круга размера, который зависит от значения, указанного в столбце «Длина ЧПУ». На осях 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 difficulties	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 difference	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 difficulties	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	specific 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	affective 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	affective 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 reflex	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 reflex	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, и это работало, но когда я импортировал данные, что-то пошло не так).

Буду благодарен за любой совет:)

Answer 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()

Теперь все это работает, и я продолжаю развивать его :)