d3 linechart - 在y轴上显示0，而不传递所有点？ [英] d3 linechart - Show 0 on the y-axis without passing in all points?

问题描述

我有一个折线图。其目的是显示给定时间段内每个用户的交易量。

I have a line chart. Its purpose is to show the amount of transactions per user over a given time period.

为此，我将获取所有用户交易的日期。我正在解决此示例： http://bl.ocks.org/mbostock/3884955

To do this I'm getting the dates of all users transactions. I'm working off this example : http://bl.ocks.org/mbostock/3884955 and have the line chart renedering fine.

我的x轴是时间，y轴是交易次数。我有问题是没有活动时显示日期。

My x-axis is time and the y-axis is number of transactions. The problem I have is to do with displaying dates when there is no activity.

说我周四有4笔交易，周四有5笔交易。我需要显示周三已经有0笔交易。因为我的数据库中没有数据明确说明用户在Wedensday没有做交易，我需要在星期三时间（和所有其他时间，取决于时间框架）传递0值？或者我可以用d3吗？我似乎找不到任何适合我的问题的例子。

Say I have 4 transactions on Tuesday and 5 transactions on Thursday..I need to show that there has been 0 transactions on Wednesday. As no data exists in my database explicitly stating that a user has made no transactions on Wedensday do I need to pass in the Wednesday time (and all other times, depending on the timeframe) with a 0 value? or can I do it with d3? I can't seem to find any examples that fit my problem.

推荐答案

这似乎是一个很常见的问题，所以我在这里编写了一个示例实现： http://jsfiddle.net/nrabinowitz/dhW2F/2/

This seems like a pretty common issue, so I worked up an example implementation here: http://jsfiddle.net/nrabinowitz/dhW2F/2/

相关代码：

  // get the min/max dates
  var extent = d3.extent(data, function(d) { return d.date; }),
      // hash the existing days for easy lookup
      dateHash = data.reduce(function(agg, d) {
          agg[d.date] = true;
          return agg;
      }, {}),
      // note that this leverages some "get all headers but date" processing
      // already present in the example
      headers = color.domain();

    // make even intervals
    d3.time.days(extent[0], extent[1])
        // drop the existing ones
        .filter(function(date) {
            return !dateHash[date];
        })
        // and push them into the array
        .forEach(function(date) {
            var emptyRow = { date: date };
            headers.forEach(function(header) {
                emptyRow[header] = null;
            });
            data.push(emptyRow);
        });
    // re-sort the data
    data.sort(function(a, b) { return d3.ascending(a.date, b.date); });

正如你所看到的，它有点复杂，但似乎工作很好 - 使用方便的 d3.interval.range 方法来均匀间隔日期，过滤掉数据中已存在的日期，并使用剩余的日期推送空行。一个缺点是，对于大数据集，性能可能会很慢 - 这假设整个行是空的，而不是不同系列中的不同的空日期。

As you can see, it's a bit convoluted, but seems to work well - you make an array of evenly spaced dates using the handy d3.interval.range method, filter out those dates already present in your data, and use the remaining ones to push empty rows. One downside is that performance could be slow for a big dataset - and this assumes full rows are empty, rather than different empty dates in different series.

gap（使用 line.defined ）而不是零点，在这里： http://jsfiddle.net/nrabinowitz/dhW2F/3/

An alternate representation, with gaps (using line.defined) instead of zero points, is here: http://jsfiddle.net/nrabinowitz/dhW2F/3/

这篇关于d3 linechart - 在y轴上显示0，而不传递所有点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！