如何在d3.js/dimple.js中使轴刻度线可点击 [英] How to make axis ticks clickable in d3.js/dimple.js

问题描述

我是d3js的新手.我想知道如何使轴刻度标签变为可单击，以便单击标签可以加载新图表(是的，我需要获取轴值，即本例中的月份名称)

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)

下面是代码. X轴是月份，单击一个月后，我需要加载该月的图表，这是另一个HTML页面.

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

        });

推荐答案

我对dimple.js一无所知，但是在d3中，您可以选择所有的刻度线并将单击处理程序附加到它们上.

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

这会将刻度线代表的Date对象写入控制台.

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

这篇关于如何在d3.js/dimple.js中使轴刻度线可点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！