Javascript D3填充日期和值

Javascript D3填充日期和值,javascript,d3.js,Javascript,D3.js,我正在用d3.time.scale构建一个简单的条形图: var data = [ {"date": new Date("1992-05-01 00:00:00"), "value": 10}, {"date": new Date("1997-05-01 00:00:00"), "value": 110}, {"date": new Date("2007-05-11 00:00:00"), "value": 34} ]; var width = 300; var

我正在用d3.time.scale构建一个简单的条形图:

var data = [
    {"date": new Date("1992-05-01 00:00:00"), "value": 10}, 
    {"date": new Date("1997-05-01 00:00:00"), "value": 110}, 
    {"date": new Date("2007-05-11 00:00:00"), "value": 34}
];

var width =  300;
var height = 200;
var barWidth = width / data.length;

var x_domain = d3.extent(data, function(d) { return d.date; });

var x = d3.time.scale()
                   .domain(x_domain) 
                   .rangeRound([0, width]);

var y = d3.scale.linear()
                .domain([0, d3.max(data, function(d) { return d.value; })])
                .range([height, 0]);

var chart = d3.select(".chart")
              .attr("width", width )
              .attr("height", height )            
              .append("g")
              .attr("transform", function(d, i) { return "translate(" + i * barWidth + ",0)"; });

var bar = chart.selectAll("g")
               .data(data)
               .enter().append("g")
               .attr("transform", function(d, i) { 
                 return "translate(" + i * barWidth + ",0)"; 
               });

bar.append("rect")
    .attr("class", "bar")
    .attr("y", function(d) { 
        return y(d.value);
    })
    .attr("height", function(d) { 
      return height - y(d.value);
    })
    .attr("width", barWidth - 1);
JSFiddle

每个日期值对一个条-简单。我想生成它们之间的日期,并为它们指定一个0值。最好的方法是什么


欢迎提供任何帮助

填写缺失的日期很简单,只需简单的javascript即可。比如:

function addDays(date, days) {
    var result = new Date(date);
    result.setDate(date.getDate() + days);
    return result;
}
function fillInDates(data){
    // put current data hash for efficient retrieval
    // determine min/max of data
    var currentDates = {};
    var maxDate = new Date(-1e15);
    var minDate = new Date(1e15);
    for (var i = 0; i <= data.length; i++){
        if (data[i]['date'] > maxDate){
            maxDate =  data[i]['date'];
        }
        if (data[i]['date'] < minDate){
            minDate = data[i]['date'];
        }
        currentDates[data[i]['date']]= data[i]['value'];
    }
    // loop data and fill in missing dates
    var filledInDates = [];
    while (minDate < maxDate){
        filledInDates.push({"date":minDate, "value":currentDates[minDate] ? currentDates[minDate] : 0});  
        minDate = addDays(minDate, 1);
    }
    return filledInDates;              
}
function addDays(日期,天){
var结果=新日期(日期);
result.setDate(date.getDate()+天);
返回结果;
}
函数fillInDates(数据){
//放置当前数据哈希以实现高效检索
//确定数据的最小/最大值
var currentDates={};
var maxDate=新日期(-1e15);
var minDate=新日期(1e15);
对于(变量i=0;i最大日期){
maxDate=data[i]['date'];
}
如果(数据[i]['date']
注意addDays函数来自

不过,让d3来绘制这张图是另一回事。现在您有5488个条,为了使数学工作(要获得大于0的条宽),您需要将打印宽度增加到10000像素


参见更新日期。

日期如1992-05-01 1992-05-02 1992-05-03 1992-05-04。。。1997-05-01? 有很多空白日期,是的。没有数据的时间段同样重要。。。