Time is repeating in dc.js linechart x axis

问题

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

回答1:

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

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}
]

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

来源：https://stackoverflow.com/questions/29828802/time-is-repeating-in-dc-js-linechart-x-axis

标签

d3.js

dc.js

crossfilter