D3 折线图由因子着色

我正在尝试根据迈克的工作制作折线图：https://bl.ocks.org/mbostock/3884955

我觉得它几乎完成了，但不知何故，线路没有出现在网络上。当我签入控制台时，我可以看到路径元素绑定到数据，如下所示：

<path class="line" d="M-697.1963619399295,450L-697.1963619388773,387.66856476995656L-697.1963619378253,385.2700720945643L-697.1963619367732,376.45940344046255L-697.1963619357211,365.5485611415587L-697.1963619346691,346.6313106168691L-697.196361933617,350.17558198677034L-697.196361932565,353.97503410091366L-697.1963619315128,312.6842695034037L-697.1963619304607,333.41027805240884L-697.1963619294087,321.8454859832573L-697.1963619283566,313.68973194787645L-697.1963619273046,241.5425737071716L-697.1963619262525,271.3271413254863L-697.1963619252003,280.314055452611L-697.1963619241483,209.81192123034214L-697.1963619230962,188.0957428765567L-697.1963619220442,185.33122960890398L-697.1963619209921,199.63550312298872L-697.19636191994,185.1121106885575L-697.196361918888,202.42299063181736L-697.1963619178358,217.14290559452036L-697.1963619167838,166.32145720825093L-697.1963619157317,137.91369117474824L-697.1963619146796,115.01923656419535L-697.1963619136276,117.12273665970253" style="stroke: rgb(31, 119, 180);"></path>

我假设路径没有显示，因为 x 位置看起来太低了？日期被解析并显示在控制台中，如下所示：

Tue Jan 01 1991 00:00:00 GMT+0000 (GMT Standard Time)

但我只需要年份信息。我只是假设在加载数据但不确定时可能会出现一些混乱。

我的数据如下所示：

time,EURO,OECD,USA,UK,
1991, 100,90,20,20,
1992, 20,40,50,30,
...

谁能帮我？

提前感谢，

<!DOCTYPE html>
<meta charset = "utf-8">
<head> 
<script src="http://d3js.org/d3.v4.js"></script>
</head>
<body>
<svg width="960" height="500"></svg>
<script>
var svg = d3.select("svg"),
margin = {top: 20, right: 80, bottom: 30, left: 50},
width = svg.attr("width") - margin.left - margin.right,
height = svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var parseTime = d3.timeParse("%Y");
var xScale = d3.scaleTime().range([0, width]);
var yScale = d3.scaleLinear().range([height, 0]); 
var zScale = d3.scaleOrdinal(d3.schemeCategory10);
var line = d3.line()
.x(function(d) { return xScale(d.date); })
.y(function(d) { return yScale(d.value); }); 
d3.csv("data.csv", type, function(data) {
var countries = data.columns.slice(1).map(function(id) {
return {
id: id,
values: data.map(function(d) { 
return {date: d.time, 
value: d[id]};
})
};
});
xScale.domain(d3.extent(data, function(d) { return d.date; }));
yScale.domain([
d3.min(countries, function(c) { return d3.min(c.values, function(d) { return d.value; }); }),
d3.max(countries, function(c) { return d3.max(c.values, function(d) { return d.value; }); })
]); 
zScale.domain(countries.map(function(c) { return c.id; })); 
g.append("g")
.attr("class", "Xaxis")
.attr("transform", "translate(0," + height + ")") 
.call(d3.axisBottom(xScale));
g.append("g")
.attr("class", "Yaxis")
.call(d3.axisLeft(yScale));

var country = g.selectAll(".country")
.data(countries)
.enter().append('g')
.attr("class", "country");
country.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return zScale(d.id); }); 
});
function type(d, _, columns) {
d.date = parseTime(d.time);
for (var i = 1, n = columns.length, c; 
i < n; ++i)
d[c = columns[i]] = +d[c];

return d; 
}
</script>
</body>

您的 CSV 有一个名为time的列，而不是date。

因此，您必须更改行函数...

d.time = parseTime(d.time);

。和秤的域：

xScale.domain(d3.extent(data, function(d) { 
return d.time; 
}));

下面是一个包含这些更改的演示，仅使用几行数据，供您查看它的工作原理： https://plnkr.co/edit/phQr3Ekd6ztZAGt9SE4v?p=preview

相关内容

最新更新

热门标签：