Линейный график с разными цветами линий в d3

Я работаю над линейной диаграммой в d3. Я застрял, так как я новичок в d3. Мне нужна помощь.

У меня есть набор данных из 4 партий (Конгресс, БДП, Джанта Дал, Индийский национальный конгресс), в котором мне нужно отобразить данные о ВВП и ВНД.

Значение ВВП по оси x и ВНД по оси y.

И хотите построить одну линию в соответствии с заданными данными, но разными цветами.

<svg  class="svgid" width="1300" height="600"></svg>

JavaScript

g.selectAll("path")     
     .data(data) 
	.enter().append("line")
	
   .attr("stroke-width", "10")
	 .style("stroke",  function(d) {            
            if (d.Party === "BJP") {return "#f58221"}  
            	else if (d.Party === "Janata Dal") {return "#008000"}
				else if (d.Party === "Congress") {return "#ffffff"}
	else if (d.Party === "Indian National Congress") {return "#004489"}
				else    { return "black" }
	;})
		.attr("y", function(d) { return x(d.GDP)} )
        .attr("y2",  function(d) { return y(d.GNI)});
CSV data:

[
 {
   "GDP": 266.502,
   "GNI": 340,
   "Year": 1991,
   "Name": "P. V. Narasimha Rao",
   "Party": "Congress"
 },
 {
   "GDP": 284.364,
   "GNI": 340,
   "Year": 1992,
   "Name": "P. V. Narasimha Rao",
   "Party": "Congress"
 },
 {
   "GDP": 257.57,
   "GNI": 320,
   "Year": 1993,
   "Name": "P. V. Narasimha Rao",
   "Party": "Congress"
 },
 {
   "GDP": 322.91,
   "GNI": 340,
   "Year": 1994,
   "Name": "P. V. Narasimha Rao",
   "Party": "Congress"
 },
 {
   "GDP": 355.476,
   "GNI": 360,
   "Year": 1995,
   "Name": "P. V. Narasimha Rao",
   "Party": "Congress"
 },
 {
   "GDP": 387.656,
   "GNI": 400,
   "Year": 1996,
   "Name": "H. D. Deve Gowda",
   "Party": "Janata Dal"
 },
 {
   "GDP": 410.32,
   "GNI": 410,
   "Year": 1997,
   "Name": "I. K. Gujral",
   "Party": "Janata Dal"
 },
 {
   "GDP": 415.731,
   "GNI": 410,
   "Year": 1998,
   "Name": "Atal Bihari Vajpayee",
   "Party": "BJP },
 {
   "GDP": 452.7,
   "GNI": 430,
   "Year": 1999,
   "Name": "Atal Bihari Vajpayee",
   "Party": "BJP"
 },
 {
   "GDP": 462.147,
   "GNI": 440,
   "Year": 2000,
   "Name": "Atal Bihari Vajpayee",
   "Party": "BJP"
 },
 {
   "GDP": 478.965,
   "GNI": 450,
   "Year": 2001,
   "Name": "Atal Bihari Vajpayee",
   "Party": "BJP"
 },
 {
   "GDP": 508.069,
   "GNI": 450,
   "Year": 2002,
   "Name": "Atal Bihari Vajpayee",
   "Party": "BJP"
 },
 {
   "GDP": 599.593,
   "GNI": 510,
   "Year": 2003,
   "Name": "Atal Bihari Vajpayee",
   "Party": "BJP"
 },
 {
   "GDP": 699.689,
   "GNI": 600,
   "Year": 2004,
   "Name": "Man Mohan Singh",
   "Party": "Indian National Congress"
 },
 {
   "GDP": 808.901,
   "GNI": 700,
   "Year": 2005,
   "Name": "Man Mohan Singh",
   "Party": "Indian National Congress"
 },
 {
   "GDP": 920.317,
   "GNI": 790,
   "Year": 2006,
   "Name": "Man Mohan Singh",
   "Party": "Indian National Congress"
 },
 {
   "GDP": 1201,
   "GNI": 920,
   "Year": 2007,
   "Name": "Man Mohan Singh",
   "Party": "Indian National Congress"
 },
 {
   "GDP": 1187,
   "GNI": 1000,
   "Year": 2008,
   "Name": "Man Mohan Singh",
   "Party": "Indian National Congress"
 },
 {
   "GDP": 1324,
   "GNI": 1110,
   "Year": 2009,
   "Name": "Man Mohan Singh",
   "Party": "Indian National Congress"
 },
 {
   "GDP": 1657,
   "GNI": 1220,
   "Year": 2010,
   "Name": "Man Mohan Singh",
   "Party": "Indian National Congress"
 },
 {
   "GDP": 1823,
   "GNI": 1380,
   "Year": 2011,
   "Name": "Man Mohan Singh",
   "Party": "Indian National Congress"
 },
 {
   "GDP": 1828,
   "GNI": 1480,
   "Year": 2012,
   "Name": "Man Mohan Singh",
   "Party": "Indian National Congress"
 },
 {
   "GDP": 1857,
   "GNI": 1520,
   "Year": 2013,
   "Name": "Man Mohan Singh",
   "Party": "Indian National Congress"
 },
 {
   "GDP": 2039,
   "GNI": 1560,
   "Year": 2014,
   "Name": "Narendra Modi",
   "Party": "BJP"
 },
 {
   "GDP": 2102,
   "GNI": 1600,
   "Year": 2015,
   "Name": "Narendra Modi",
   "Party": "BJP"
 },
 {
   "GDP": 2274,
   "GNI": 1680,
   "Year": 2016,
   "Name": "Narendra Modi",
   "Party": "BJP"
 },
 {
   "GDP": 2601,
   "GNI": 1800,
   "Year": 2017,
   "Name": "Narendra Modi",
   "Party": "BJP"
 }
]


svg charts d3.js line
person claudia    schedule 02.03.2019    source источник
comment
Клаудия - пожалуйста, опубликуйте любой код, который вы пробовали - без кода этот вопрос может быть закрыт.   -  person Michael Mullany    schedule 02.03.2019

Ответы (1)


arrow_upward
0
arrow_downward

Сначала вы можете определить масштабы x и y для ваших данных:

xScale = d3.scaleLinear()
  .domain(d3.extent(data, d => d.GDP))
  .range([0, width]);

yScale = d3.scaleLinear()
  .domain(d3.extent(data, d => d.GNI))
  .range([height, 0]);

Если вы хотите отдельную строку для каждой из политических партий, то вам, вероятно, потребуется подготовить отдельный массив данных для каждой партии, отфильтровав исходные данные.

const congress = data.filter(d => d.Party === 'Congress');
const bjp = data.filter(d => d.Party === 'BJP');
...
etc

Затем вы можете создать генератор линий, который можно использовать для рисования каждой линии:

const lineGenerator = d3.line()
  .x(d => xScale(d))
  .y(d => yScale(d));
...
etc

Затем вы можете добавить каждую строку в диаграмму:

const svg = d3.select('svg');

svg.append('path')
  .datum(congress)
  .style('stroke', 'darkgreen')
  .style('fill', 'none')
  .attr('d', lineGenerator);
...
etc
person Joe    schedule 06.03.2019