我正在研究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)});
[
{
"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"
}
]
答案 0 :(得分：0)
首先，您可以确定数据的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