时间在dc.js线图x轴中重复 [英] Time is repeating in dc.js linechart x axis

问题描述

您好，我有一个使用dc.js折线图制作的折线图.但我在x轴时间值方面面临问题.我在这里附上我的jsfiddle. http://jsfiddle.net/6e67uzfn/24/ 如您所见，同一分钟重复多次.但是我只想在x轴上一次显示同一分钟.我怎样才能做到这一点?这是您也可以在jsfiddle中找到的示例代码.

Hello I have a line chart made using dc.js linechart. But i am facing problem in the x axis time values. I am attaching my jsfiddle here. http://jsfiddle.net/6e67uzfn/24/ As you see the same minute is repeating multiple times. But i want to show the same minute only once in the x axis. How can I do that? Here is the sample code which you can find in the jsfiddle also.

   var data=[
    {"id":20,"time":"2015-03-29T20:32:24Z","speed":20},
    {"id":21,"time":"2015-03-29T20:32:24Z","speed":15},
    {"id":22,"time":"2015-03-29T20:32:24Z","speed":16},
    {"id":23,"time":"2015-03-29T20:33:25Z","speed":14},
    {"id":20,"time":"2015-03-29T20:33:26Z","speed":20},
    {"id":21,"time":"2015-03-29T20:34:24Z","speed":10},
    {"id":22,"time":"2015-03-29T20:34:24Z","speed":15},
    {"id":23,"time":"2015-03-29T20:35:24Z","speed":15},
]
// The datset is much larger with many detector. This is sample
    var dateformat=d3.time.format("%H:%M:%S").parse;
    var ISO8601format=d3.time.format("%Y-%m-%dT%H:%M:%SZ");
    var hoursandminsformat=d3.time.format("%H:%M:%S"); 
data.forEach(function(d) {
    d.time=d.time.substring(11,19);
    d.time=dateformat(d.time);
});
    d3.select("#times").selectAll("p").data(data).enter().append("p").text(function(d){return d.time;});
var freqchart=dc.lineChart("#chart1");
var ndx=crossfilter(data);
var countByTime=ndx.dimension(function (d) {

                return d.time;

        });

        var freqbyTimeGroup = countByTime.group().reduceCount();

    freqchart.width(400).height(200).transitionDuration(500)
        .dimension(countByTime).group(freqbyTimeGroup)
                .elasticY(true).x(
                d3.time.scale().domain([d3.min(data,function(d){return d.time}),d3.max(data,function(d){return d.time})]))
                .xUnits(d3.time.minutes)
                //.on("filtered", onFilt)
                .yAxisLabel("Frequency").xAxisLabel('Time');
var minutesOnly = d3.time.format('%M');
var xAxis = freqchart.xAxis().tickFormat(minutesOnly);
freqchart.render();

推荐答案

我认为重复x轴刻度没有错，因为您已经用上述方式设置了tickFormat.

I thinkg there is nothing wrong, in repeating x-axis ticks, because you've set tickFormat in such way.

var minutesOnly = d3.time.format('%M');
var xAxis = freqchart.xAxis().tickFormat(minutesOnly);

在上面的代码中，您将x轴刻度格式设置为分钟，在您的数据中

In above code you are setting x-axis tick format as minutes,In your data

var data=[
    {"id":20,"time":"2015-03-29T20:32:24Z","speed":20},
    {"id":21,"time":"2015-03-29T20:32:24Z","speed":15},
    {"id":22,"time":"2015-03-29T20:32:24Z","speed":16},
    {"id":23,"time":"2015-03-29T20:33:25Z","speed":14},
    {"id":20,"time":"2015-03-29T20:33:26Z","speed":20},
    {"id":21,"time":"2015-03-29T20:34:24Z","speed":10},
    {"id":22,"time":"2015-03-29T20:34:24Z","speed":15},
    {"id":23,"time":"2015-03-29T20:35:24Z","speed":15}
]

看您的会议记录，分别是32、32、32、33、33、34、34、35. 这就是它的工作方式.

look at your minutes, 32, 32, 32, 33, 33, 34, 34, 35. So that's how it's working.

希望您能理解.如果不要求我更多. 推荐这个 时间格式

Hope you got it.If not ask me for more. Refer this Time-Formatting

这篇关于时间在dc.js线图x轴中重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！