nvd3.js：在折線圖中沒有鼠標懸停數據點效果

Question

我正在嘗試使用nvd3/d3繪製一個簡單的折線圖。 「鼠標懸停」期間在數據點上發生的轉換不可見。如何解決這個問題？

添加以下代碼：

Date.prototype.addHours = function(h) { 
    this.setHours(this.getHours() + h); 
    return this; 
}; 

function getData(transport) { 
    var arr = []; 
    for (var i = 0; i < transport.length; i++) { 
     arr.push({ 
      x : new Date(transport[i].timePeriod).addHours(7), 
      y : transport[i].number 
     }); 
    } 
    return arr; 
} 

function cumulativeTestData(transport) { 

    return [{ 
     key : "Active Customers", 
     values : getData(transport), 
     color : "#ff7f0e" 
    }]; 
} 

nv.addGraph(function() { 
    var chart; 
    chart = nv.models.lineChart().x(function(d) { 
     return d.x; 
    }).y(function(d) { 
     return d.y; 
    }); 

    chart.xAxis.tickFormat(function(d) { 
     return d3.time.format("%d-%m-%y")(new Date(d)); 
    }); 

    chart.yAxis.tickFormat(d3.format(',g')); 
    d3.select('#chart1 svg').datum(cumulativeTestData(transport)) 
    // .transition().duration(500) 
    .call(chart); 

    nv.utils.windowResize(chart.update); 
    chart.dispatch.on('stateChange', function(e) { 
     nv.log('New State:', JSON.stringify(e)); 
    }); 

    return chart; 
}); 

$(function() { 
    $("#day").click(function() { 
     var from = $("#from").val(); 
     var to = $("#to").val(); 
     $.ajax({ 
      url : "http://api.local/api/GraphData?startDate=" + from + "&endDate=" + to, 
      type : 'GET', 
      contentType : "application/javascript", 
      crossDomain : true, 
      dataType : "jsonp", 
      cache : false, 
      async : false, 
      success : function(transport) { 
       // nv.addGraph(drawGraph(transport)); 
       drawGraph(transport); 
      }, 
      error : function() { 
       alert("failed in calling status"); 
      } 
     }); 
    }); 
}); 

如果我單獨運行這段代碼，我可以看到的數據點，但我必須包括該圖與許多其他控件，數據點似乎並不奏效。

也想補充一點，當我上線圖上的特定數據點點擊，我看到這個錯誤發生火災錯誤的控制檯

錯誤：屬性值無效CX =「南」

Answer 1

您可能需要改變你的JSON結構，無論是number成爲y和timePeriod成爲x，所以其可以通過個數據訪問在已經被傳遞到lineChart()：

chart = nv.models.lineChart().x(function(d) { 
     return d.x; 
    }).y(function(d) { 
     return d.y; 
    }); 

如果您正在使用：

chart.xAxis.tickFormat(function(d) { 
     return d3.time.format("%d-%m-%y")(new Date(d)); 
    }); 

日期應該在UNIX時戳格式返回。如果您不發送UNIX時間戳只需使用chart.xAxis.tickFormat()。

我有一個示例代碼運行在fiddle只是看看。

最後你需要一個類似於這個的數據結構。

data = [{ 
    "values" : [{ 
     "x" : 1025409600000, 
     "y" : 0 
    }, { 
     "x" : 1028088000000, 
     "y" : 0.09983341664682815 
    }, { 
     "x" : 1030766400000, 
     "y" : 0.19866933079506122 
    }, { 
     "x" : 1033358400000, 
     "y" : 0.29552020666133955 
    }, { 
     "x" : 1036040400000, 
     "y" : 0.3894183423086505 
    }], 
    "key" : "Line 1", 
    "color" : "#ff7f0e" 
}, { 
    "values" : [{ 
     "x" : 1025409600000, 
     "y" : 0.5 
    }, { 
     "x" : 1028088000000, 
     "y" : 0.4975020826390129 
    }, { 
     "x" : 1030766400000, 
     "y" : 0.4900332889206208 
    }, { 
     "x" : 1033358400000, 
     "y" : 0.477668244562803 
    }, { 
     "x" : 1036040400000, 
     "y" : 0.46053049700144255 
    }], 
    "key" : "Line 2", 
    "color" : "#2ca02c" 
}] 

希望它有幫助。