d3.js 中未出現的行

Question

我正在嘗試使用 d3 創建折線圖。 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

我需要一行來顯示每個日期的總值。 我為此使用了 d3.rollups() 。 但是圖表不顯示任何線條，控制台也沒有返回任何錯誤。

這是我正在使用的代碼

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')
});

如果有人能看一看，將不勝感激！ 謝謝你！

Answer 1

您的totalCases只是 arrays 的數組，而不是對象數組。 看一看：

 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>

因此，您必須更改行生成器，因為沒有date或cases屬性：

let firstline = d3.line()
    .x(d => d[0])
    .y(d => d[1])

因為默認情況下線生成器的 x 和 y 訪問器是內部數組中的第一個和第二個元素，所以該線生成器可以更簡單，只是這樣：

let firstline = d3.line()

最后，更改d屬性： .attr('d', firstline)

Answer 2

對於給您帶來的不便，我們深表歉意 請聯系他們的相關渠道以解決此問題。

如果您計划使用 walmart.io/products 上托管的附屬 API，您需要通過我們的開發人員門戶網站上的入職 go 可以在 https 找到說明： https://walmart.io/docs/affiliate/quick-start-guide

問候，Firdos IO 支持