2015-04-23 1 views
0

Здравствуйте, у меня есть линейная диаграмма, построенная с использованием строки dc.js. Но я столкнулся с проблемой в значениях времени оси x. Я прилагаю здесь свой jsfiddle. http://jsfiddle.net/6e67uzfn/24/ Как вы видите, одна и та же минута повторяется несколько раз. Но я хочу показать одну и ту же минуту только один раз по оси x. Как я могу это сделать? Вот пример кода, который вы также можете найти в jsfiddle.Время повторяется в dc.js linechart x axis

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

Может быть, вам нужен х граф как http://c3js.org/samples/simple_xy.html, если вы хотите, чтобы показать те же данные на один и том же х координат? – Derek

ответ

0

Я думаю, что нет ничего плохого в повторении титров по оси х, потому что вы установили tickFormat таким образом.

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

В коде выше вы устанавливаете формат клеща х-оси, как минуты, в данных

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