d3 js line chart

I’m trying to make an interactive line-chart with d3.js. I get the datas from two csv files (emissions.csv and gdp.csv) and I would like that when i pass with the mouse on the graph, it shows a kind of label with information on the corresponding point on the line. Now I have to pass the mouse ON the line to show the label and I can’t figure out how to do what i want to do. I’ve found this example that shows what I want but I cant understand some of the code-lines and I can’t understand how to use it on mine graph.
Here my code:

year,UnitedKingdom,Italy,France,Spain,Germany
2012,483423,386666,368845,276636,821717
2011,464036,413379,364819,280922,810441
2010,504997,424993,391075,280377,829401
2009,487442,414809,381992,293732,785602
2008,536733,463695,400720,333181,851111
2007,554251,475436,407254,363744,848548
2006,561128,483533,416414,356712,873246
2005,561101,488078,425740,365478,861733
2004,563962,489367,422201,350071,881743
2003,562296,486559,420492,333168,893599
2002,551553,470530,412019,328878,890875
2001,567904,468283,416267,308786,907541
2000,556667,462277,415079,308026,891515
1999,548047,458824,418193,294901,887890
1998,555499,453524,426564,271515,915176
1997,550525,442371,404884,263303,923080
1996,575026,438303,411302,250543,951863
1995,553701,444943,398480,262860,930857
1994,562061,419903,391681,249451,932485
1993,568100,427170,391484,237253,948683
1992,581828,433867,413020,245814,957561
1991,598323,434156,423121,237179,1004735
1990,591499,434656,398769,227508,1042065

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 5380659dee929766 • Your IP : 78.85.5.224 • Performance & security by Cloudflare

Теперь, вооружившись материалом прошлых тем, создадим простейший график или линейную диаграмму. Фактически нам надо соединить координатные оси с построением путей из отдельных линий:

Для создания линейного графика нам потребуется два набора данных — в данном случае это массивы rawData и data. rawData представляет собственно те данные, которые надо визуализировать, а массива data представляет те же данные, но уже адаптированные к координатной сетке со всеми масштабированиями и смещениями. Если бы мы напрямую визуализировали данные как есть, то второй массив бы не понадобился. Но в реальности без адаптации имеющихся данных к координатной сетке не обойтись, особенно когда одно из измерений данных представляет нечисловые данные, например, даты.

Для интерполяции данных используются две функции scaleX и scaleY . Для перевода реальных данных в координатные применяем цикл по всем элементам массива rawData:

Так как координатные оси вместе со всей сеткой будут начинаться не сразу с границ элемента svg, а будут сдвинуты на отступ, задаваемый переменной margin, то все точки графика также надо сдвинуть на тот же отступ.

Далее строится координатная сетка и путь, представляющий график:

Оцените статью