How to make axis ticks clickable in d3.js/dimple.js

问题

I'm very new to d3js. I wish to know how to make axis tick labels to clickable so that clicking on the labels I can load new charts( yes I need to get the axis value, ie month name here in my case)

Below is the code. X axis are months and once I click on a month, I need to load chart of that month, which is another HTML page.

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();

        });

回答1:

I don't know anything about dimple.js, but in d3 you can just select all of the tick marks and attach a click handler to them.

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

This will write the Date object that the tick represents to the console.

回答2:

This will autoplay all months, and log x-Axis value on click.

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

来源：https://stackoverflow.com/questions/27522009/how-to-make-axis-ticks-clickable-in-d3-js-dimple-js

标签

javascript

d3.js

dimple.js