d3.js/dimple.js에서 축 틱스를 클릭 할 수있게 만드는 방법

Question

저는 d3js에 대해 매우 익숙합니다. 클릭 할 수 있도록 축 눈금 레이블을 만드는 방법을 알고 싶습니다. 레이블을 클릭하여 새 차트를로드 할 수 있습니다 (예 : 축 값, 예를 들어 내 이름을 여기에 입력해야합니다)

아래 코드는 다음과 같습니다. X 축은 몇 개월이고 한 달을 클릭하면 그 달의 차트 (다른 ​​HTML 페이지)를로드해야합니다.

d3.csv("data/data_1.CSV", function (data) { 

    var myChart = new dimple.chart(svg, data); 

        myChart.setBounds(90, 70, 490, 320); 



        var x = myChart.addTimeAxis("x", "Month", "%d-%b-%Y %H:%M:%S", “%b-%Y"); 

        var y = myChart.addMeasureAxis("y","Value"); 

        x.overrideMin = new Date("2013-11-30"); 



        var s = myChart.addSeries("Value type", dimple.plot.line); 

        s.lineMarkers = true; 



        myChart.addLegend(180, 30, 360, 20, "left"); 

        myChart.draw(); 

     }); 

Answer 1

나는 dimple.js에 대해 아무것도 몰라,하지만 d3에 당신은 단지 눈금을 모두 선택하고 그들에 클릭 핸들러를 연결합니다.

svg.selectAll('.tick') 
    .on('click', function(d) { console.log(d); }); 

이것은 틱이 나타내는 Date 객체를 콘솔에 씁니다.

Answer 2

이렇게하면 모든 달이 자동 재생되며 클릭시 x 축 값이 기록됩니다.

d3.csv("data/data_1.CSV", function (data) { 
    var myChart = new dimple.chart(svg, data); 
        myChart.setBounds(90, 70, 490, 320); 
        var x = myChart.addTimeAxis("x", "Month", "%d-%b-%Y %H:%M:%S", "%b-%Y"); 
        x.overrideMin = new Date("2013-01-01"); 
        x.addOrderRule("Date"); 
        var y = myChart.addMeasureAxis("y","Value"); 
        var s = myChart.addSeries("Value type", dimple.plot.line); 
        s.lineMarkers = true; 
        myChart.addLegend(180, 30, 360, 20, "left"); 
        s.addEventHandler("click", function (e) { 
        console.log(e.xValue); 
}); 
        var myStoryboard = myChart.setStoryboard("Month"); 
        myStoryboard.frameDuration = 15000; 
        myStoryboard.autoplay = true; 
        myChart.draw(); 
     });