Question

您好我有一个使用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();

Answer 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

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

1 个答案: