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

这会将tick表示的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();
        });

如何在d3.js / dimple.js中点击轴刻度

2 个答案: