D3互動式流圖：過去一個月重復的數據

Question

我正在使用受此概念驗證啟發的此流圖示例。 我的例子，可以發現在這里上的jsfiddle。 從一月到二月，為什么我的數據會重復，我一頭霧水。

我懷疑問題出在這里：

.on("mousemove", function(d, i) {
  mousex = d3.mouse(this);
  mousex = mousex[0];

  var invertedx = x.invert(mousex), selected = (d.values);
  invertedx = invertedx.getMonth() + invertedx.getDate();

  for (var k = 0; k < selected.length; k++) {
    datearray[k] = selected[k].date
    datearray[k] = datearray[k].getMonth() + datearray[k].getDate();
  }

  //console.log(d.values);

  mousedate = datearray.indexOf(invertedx);
  pro = d.values[mousedate].value;

  var newDate = formatDate(d.values[mousedate].date, "d MMM yyyy");

  d3.select(this)
  .classed("hover", true)
  .attr("stroke", strokecolor)
  .attr("stroke-width", "0.5px"), 
  tooltip.html( "<p>"+newDate+" [" + d.key + ": " + pro + "]</p>" ).style("visibility", "visible");

})

因此，我添加了一個onClick事件以查看發生了什么：

var invertedx = x.invert(mousex), selected = (d.values);
  invertedx = invertedx.getMonth() + invertedx.getDate();

像這樣：

.on("click", function(d,i){
  mousex = d3.mouse(this);
  mousex = mousex[0];

  var invertedx = x.invert(mousex), selected = (d.values);
  invertedx = invertedx.getMonth() + invertedx.getDate();
  var newDate = formatDate(d.values[mousedate].date, "d MMM yyyy");
  pro = d.values[mousedate].value;

  console.log(newDate+"; "+pro);
})

當我超過2月時，newDate和pro都開始循環回到1月初。這太令人發瘋了！ 我的眼睛跳過什么？ 任何想法都會有所幫助。

*更新

這些值之所以重復是因為

mousedate = datearray.indexOf(invertedx);
console.log(invertedx);

當點擊時，inverted var返回月中的某天。 因此，即使該日期是2月，也沒有關系，因為該日期被視為映射到d.values對象的數字：

 pro = d.values[mousedate].value; 

由於代碼中的var reversedx = x.invert（mousex），當一個月移動到另一個月時，它將僅“重置”日期，然后將其映射到對象，從而顯示不正確的值。 mousex正在映射到圖形上的x坐標。

現在，我們如何使vertexx包含日期數字而不是日期數字？ 例如，讓我們有一個時間x欄，表示一月和二月，即59天（31 + 28，現在忽略，年）。 如果我單擊與2月28日相對應的圖形區域，則我想將invertx = 59而不是28。如何做到這一點？

預先感謝。

Answer 1

解決了。

.on("mousemove", function(d, i) {
    mousex = d3.mouse(this);
    mousex = mousex[0];

    var invertedx = x.invert(mousex), selected = (d.values);
    var newDate = formatDate(invertedx, "d MMM yyyy");
    invertedx = invertedx.getMonth() + invertedx.getDate();

    for (var k = 0; k < selected.length; k++) {
      datearray[k] = selected[k].date
      datearray[k] = datearray[k].getMonth() + datearray[k].getDate();
    }

    mousedate = datearray.indexOf(invertedx);
    pro = d.values[mousedate].value;

    d3.select(this)
    .classed("hover", true)
    .attr("stroke", strokecolor)
    .attr("stroke-width", "0.5px"), 
    tooltip.html(newDate+": " + d.key + ": " + pro).style("visibility", "visible").style("left", mousex + "px" );

  })

移動var newDate = formatDate（invertedx，“ d MMM yyyy”）; 將其直接放在verticalx下，並將該變量傳遞給formatDate，以便顯示正確的日期和信息。

看這里 。 它有點粗糙，但是可以用。 您只需要單擊流圖上的任意位置，即可看到左側正確填充的框。 我為混淆任何人表示歉意。