时间在 dc.js 折线图 x 轴中重复答案

【问题标题】：Time is repeating in dc.js linechart x axis时间在 dc.js 折线图 x 轴中重复
【发布时间】：2015-04-23 16:04:13
【问题描述】：

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

   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 坐标上显示相同的数据，也许你需要一个像 c3js.org/samples/simple_xy.html 这样的 xy 图？

标签： d3.js dc.js crossfilter

【解决方案1】：

我认为重复 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。这就是它的工作原理。

希望你明白了。如果不问我更多。参考这个 Time-Formatting

【讨论】：