Question

我正在使用JSON，如下所示：

[
    {
        "source": "Google",
        "date": "2014-02-01",
        "spend": 21,
        "clicks": 1000
    },
    {
        "source": "Bing",
        "date": "2014-02-01",
        "spend": 5,
        "clicks": 541
    },
    {
        "source": "Google",
        "date": "2014-02-02",
        "spend": 24,
        "clicks": 1029
    },
    {
        "source": "Bing",
        "date": "2014-02-02",
        "spend": 12,
        "clicks": 754
    }
]

并希望将其输入Crossfilter以使用NVD3创建折线图。我不知道从哪里开始，但我希望折线图使用以下内容：

X轴 - 日期
Y轴 - 点击
每个来源1行

这是我在没有Crossfilter的情况下能够构建的：

(function () {
    var ymdFormat = d3.time.format('%Y-%m-%d');
    d3.json('./data.json', function (err, json) {
        nv.addGraph(function () {
            var chart = nv.models.lineChart()
            chart.margin({ left: 100 })
                     .useInteractiveGuideline(true)
                     .transitionDuration(350)
                     .showLegend(true)
                     .showYAxis(true).showXAxis(true);
            chart.xAxis
                     .axisLabel('Date')
                     .tickFormat(function (d) {
                            return d3.time.format('%b %Y')(new Date(d));
                     });
            chart.yAxis
                     .axisLabel('Clicks')
                     .tickFormat(d3.format(','));

            data = parseData(json);

            d3.select('#graph').append('svg')
                .datum(data).call(chart);
        });
    })

    function parseData(json) {
        var data, result, key;
        data = {};
        json.forEach(function (elmt) {
            if (!(elmt.source in data)) {
                data[elmt.source] = { values: [] }
            }
            data[elmt.source].values.push({ x: ymdFormat.parse(elmt.date), y: elmt.clicks })
        });

        result = [];
        for (key in data) {
            if (data.hasOwnProperty(key)) {
                result.push({
                    key: key,
                    values: data[key].values
                });
            }
        }
        console.log(result);
        return result;
    }
})()

Answer 1

我有这个问题。我有一个解决方案，但不是很好。

var filterByMonthSource = filter.dimension(function(d) { return d.date + ':' + d.source });
var clicksGroup = filterByMonth.group().reduceSum(function(d) { return d.clicks });
var clicksData = clicksGroup.all();

clicksData将有[{key：＆＃34; 2014-02-01：Google＆＃34;，value：...}，...]

然后我必须将clicksData分解为3个字段的数组。

为Crossfilter维度使用多个值

1 个答案: