[英]Lines not appearing in d3.js
I am trying to create a line chart with d3.我正在尝试使用 d3 创建折线图。 The csv file looks like this: csv 文件如下所示:
code,country,date,cases
AFG,Afghanistan,2020-03-23,0.059
US,United States,2020-03-24,0.063
FR,France,2020-03-25,0.174
GR,Germany,2020-03-26,0.195,
AFG,Afghanistan,2020-03-23,0.233
US,United States,2020-03-24,0.285
FR,France,2020-03-25,0.278
GR,Germany,2020-03-26,0.257
I need to line to show the total values for each date.我需要一行来显示每个日期的总值。 I used the d3.rollups() for this.我为此使用了 d3.rollups() 。 However the chart doesn't display any line and the console is not returning any error.但是图表不显示任何线条,控制台也没有返回任何错误。
This is the code I am using这是我正在使用的代码
let line1= d3.select("#linechart1")
.append("svg")
.attr("width", widthline - marginline.left - marginline.right)
.attr("height", heightline - marginline.top - marginline.bottom)
.append("g")
.attr("transform", "translate(" + marginline.left + "," + marginline.top + ")");
const parseDate= d3.timeParse("%Y-%m-%d");
d3.csv("./multilinedata.csv").then(function(dataline) {
dataline.forEach(function(d) {
d.date = parseDate(d.date);
d.cases = +d.cases;
d.vaccinations= +d.vaccinations;
});
const totalCases = d3.rollups(dataline, d => d3.sum(d, e => e.cases), d => d.date);
let x = d3.scaleTime().domain(d3.extent(dataline, function(d) {return d.date;}))
.range([0, width]);
let y = d3.scaleLinear().range([500, 0])
.domain([0, d3.max(dataline, function(d) {return d.cases;})]);
let firstline = d3.line()
.x(function(totalCases) { return x(totalCases.date); })
.y(function(totalCases) { return y(totalCases.cases); })
let axisX= line1.append('g')
.attr('class', 'axis')
.attr('transform', 'translate(0,' + 500 +')')
.call(d3.axisBottom(x))
.append('text')
.attr('x', 450)
.attr('y', -10)
.attr('fill', 'black')
.attr('font-size', '12px')
.text("Date");
let axisY = line1.append('g')
.attr('class', 'axis')
.call(d3.axisLeft(y))
.append('text')
.attr('x', -15)
.attr('y', 20)
.attr('fill', 'black')
.attr('font-size', '12px')
.attr('transform', 'rotate(-90)')
.text('New casses/vaccinations');
line1.selectAll('.line').data(totalCases).enter()
.append('path')
.attr('fill', 'none')
.attr('stroke-width', .5)
.attr('class', 'line')
.attr('d',d => firstline(d[1]))
.style('stroke', 'steelblue')
});
Would really appreciate it if someone could take a look!如果有人能看一看,将不胜感激! Thank you!谢谢你!
Your totalCases
is just an array of arrays, not an array of objects.您的totalCases
只是 arrays 的数组,而不是对象数组。 Have a look:看一看:
const csv = `code,country,date,cases AFG,Afghanistan,2020-03-23,0.059 US,United States,2020-03-24,0.063 FR,France,2020-03-25,0.174 GR,Germany,2020-03-26,0.195, AFG,Afghanistan,2020-03-23,0.233 US,United States,2020-03-24,0.285 FR,France,2020-03-25,0.278 GR,Germany,2020-03-26,0.257`; const data = d3.csvParse(csv, d3.autoType); const totalCases = d3.rollups(data, d => d3.sum(d, e => e.cases), d => d.date); console.log(totalCases);
<script src="https://d3js.org/d3.v7.min.js"></script>
Therefore, you have to change the line generator, since there's no date
or cases
properties:因此,您必须更改行生成器,因为没有date
或cases
属性:
let firstline = d3.line()
.x(d => d[0])
.y(d => d[1])
Because by default the x and y accessors of a line generator are the first and second elements in the inner array, that line generator can be even simpler, just this:因为默认情况下线生成器的 x 和 y 访问器是内部数组中的第一个和第二个元素,所以该线生成器可以更简单,只是这样:
let firstline = d3.line()
Finally, change the d
attribute: .attr('d', firstline)
最后,更改d
属性: .attr('d', firstline)
Apologies for the inconvenience Please reach out to their relevant channel to get this query resolved.对于给您带来的不便,我们深表歉意 请联系他们的相关渠道以解决此问题。
If you are planning to use Affiliates APIs hosted on walmart.io/products, you will need to go through onboarding on our developer portal Instructions can be found at https://walmart.io/docs/affiliate/quick-start-guide如果您计划使用 walmart.io/products 上托管的附属 API,您需要通过我们的开发人员门户网站上的入职 go 可以在 https 找到说明: https://walmart.io/docs/affiliate/quick-start-guide
Regards, Firdos IO Support问候,Firdos IO 支持
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.