nvd3.js : 꺾은 선형 차트에서 mouseover 데이터 포인트 효과가 나타나지 않습니다.

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 = "NaN의"

Answer 1

하나 number이 y 및 timePeriod된다 x가되도록 그것 번째의 데이터가 액세스 할 수 있도록

당신은 당신의 JSON 구조를 변경해야 할 수도 있습니다 시는 lineChart()로 통과됩니다 : 당신이 사용하는 경우

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

:

날짜가 UNIX 타임 스탬프 형식으로 반환해야

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

. 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" 
}] 

희망이 있습니다.