d3

Question

我正在研究d3中的折线图。我因为在d3中是新手而陷入困境。我需要帮助。

我有4个缔约方（国会，BJP，扬塔·达尔，印度国民议会）的数据集，在这些数据集中，我需要显示GDP和GNI的数据。

xAxis和GNI yAxis中的GDP值。

并希望根据给定的数据绘制单行，但以不同的颜色绘制。

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

Answer 1

首先，您可以确定数据的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