Линейная диаграмма с разными цветами линий в d3 - PullRequest
Новая
       51

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

0 голосов
/ 02 марта 2019

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

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

ЗначениеВВП в xAxis и ВНД yAxis.

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

<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: 

[
 {
   "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"
 }
]

1 Ответ

0 голосов
/ 06 марта 2019

Сначала вы можете определить шкалы 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
...