D3.js 时间在dc.js线条图x轴中重复

D3.js 时间在dc.js线条图x轴中重复,d3.js,dc.js,crossfilter,D3.js,Dc.js,Crossfilter,您好,我有一个使用dc.js linechart制作的折线图。但我面临着x轴时间值的问题。我在这里附上我的JSFIDLE。 正如你所见,同一分钟重复了多次。但我想在x轴上只显示一次同一分钟。我该怎么做?下面是您也可以在JSFIDLE中找到的示例代码 var data=[ {"id":20,"time":"2015-03-29T20:32:24Z","speed":20}, {"id":21,"time":"2015-03-29T20:32:24Z","speed":15},

您好,我有一个使用dc.js linechart制作的折线图。但我面临着x轴时间值的问题。我在这里附上我的JSFIDLE。 正如你所见,同一分钟重复了多次。但我想在x轴上只显示一次同一分钟。我该怎么做?下面是您也可以在JSFIDLE中找到的示例代码

   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

var minutesOnly = d3.time.format('%M');
var xAxis = freqchart.xAxis().tickFormat(minutesOnly);
在上面的代码中,您正在数据中将x轴刻度格式设置为分钟

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。 这就是它的工作原理

希望你能得到。如果你不想再多问我一些。 参考此

如果要在相同的x坐标上显示相同的数据,可能需要一个xy图形?