扩展dc.js以添加“simpleLineChart”图表 [英] Extending dc.js to add a "simpleLineChart" chart

问题描述

编辑在这里查看我想要做的非工作示例： http://bl.ocks.org/elsherbini/5814788

edit See here for the non-working example of what I'm trying to do: http://bl.ocks.org/elsherbini/5814788

我使用dc.js绘制从蜂巢收集的数据大学。我将新数据推送到每个数据库更改的图表（使用Meteor的魔力）。 当数据库超过5000条记录时，重新描述行会变得非常慢。因此，我想使用simplify.js在渲染之前预处理这些行。要查看我在说什么，请转到 http://datacomb.meteor.com/ 。

I am using dc.js to plot data collected from bee hives at my university. I am pushing new data to the graphs on every database change (using the magic of Meteor). When the database is over 5000 records or so, rerendering the lines gets really slow. So I want to use simplify.js to preprocess the lines before rendering. To see what I'm talking about, go to http://datacomb.meteor.com/. The page freezes after a couple of seconds, so be warned.

我已经开始使用 simpleLineChart扩展dc.js ，它将继承现有的 dc.lineChart 对象/函数。这是我到目前为止：

I have started to extend dc.js with a simpleLineChart, which would inherit from the existing dc.lineChart object/function. Here is what I have so far:

dc.simpleLineChart = function(parent, chartGroup) {
    var _chart = dc.lineChart(),
        _tolerance = 1,
        _highQuality = false,
        _helperDataArray;

    _chart.tolerance = function (_) {
        if (!arguments.length) return _tolerance;
        _tolerance = _;
        return _chart;
    };

    _chart.highQuality = function (_) {
        if (!arguments.length) return _highQuality;
        _highQuality = _;
        return _chart;
    };

    return _chart.anchor(parent, chartGroup);
}

simplify.js接收数据数组， tolerance 和布尔 highQuality ，并根据简化算法返回一个包含较少元素的新数组。

simplify.js takes in an array of data, a tolerance, and a boolean highQuality, and returns a new array with fewer elements based on it's simplification algorithm.

dc.js使用crossfilter.js。 dc.js图表​​与特定的交叉过滤器维和组相关联。最后，它使用 someGroup（）。all（）的数据作为传递给 d3.svg.line（）的数据。 code> 我找不到这里发生在dc.js源，但这是我需要干预的地方。我想找到这个方法，并在 dc.simpleLineChart 对象中覆盖它。

dc.js uses crossfilter.js. dc.js charts are associated with a particular crossfilter dimension and group. Eventually, it uses the data from someGroup().all() as the data to pass to a d3.svg.line(). I can't find where this is happening in the dc.js source, but this is where I need to intervene. I want to find this method, and override it in the dc.simpleLineChart object that I am making.

正在想像

_chart.theMethodINeedToOverride = function(){
    var helperDataArray = theChartGroup().all().map(function(d) { return {
        x: _chart.keyAccessor()(d), 
        y: _chart.valueAccessor()(d)};})

    var simplifiedData = simplify(helperDataArray, _tolerance, _highQuality)

    g.datum(simplifiedData); // I know I'm binding some data at some point
                             // I'm just not sure to what or when
}

任何人都可以帮助我识别我需要覆盖哪种方法，甚至更好，告诉我如何这样做？

Can anyone help me either identify which method I need to override, or even better, show me how to do so?

dc.js来源： https://github.com/NickQiZhu/ dc.js / blob / master / dc.js

编辑：

我想我可能找到了我需要重写的函数。原始函数是

I think I may have found the function I need to override. The original function is

function createGrouping(stackedCssClass, group) {
    var g = _chart.chartBodyG().select("g." + stackedCssClass);

    if (g.empty())
        g = _chart.chartBodyG().append("g").attr("class", stackedCssClass);

    g.datum(group.all());

    return g;
}

我已经尝试覆盖它了

function createGrouping(stackedCssClass, group) {
    var g = _chart.chartBodyG().select("g." + stackedCssClass);

    if (g.empty())
        g = _chart.chartBodyG().append("g").attr("class", stackedCssClass);

    var helperDataArray = group().all().map(function(d) { return {
        x: _chart.keyAccessor()(d), 
        y: _chart.valueAccessor()(d)};})

    var simplifiedData = simplify(helperDataArray, _tolerance, _highQuality)

    g.datum(simplifiedData);

    return g;
}

但是，当我创建一个simpleLineChart时， code> tolerance（）和 highQuality（）方法。请参阅： http://bl.ocks.org/elsherbini/5814788

However, when I make a simpleLineChart, it is just a linechart with a tolerance() and highQuality() method. See here: http://bl.ocks.org/elsherbini/5814788

推荐答案

好吧，我差不多做了我要做的事。
http://bl.ocks.org/elsherbini/5814788

Well, I pretty much did what I set out to do. http://bl.ocks.org/elsherbini/5814788

关键是不仅修改 createGrouping 函数，还修改 lineY 函数。 （ lineY 设置为告诉 d3.svg.line（）实例如何设置给定的y值 d ）

The key was to not only modify the createGrouping function, but also the lineY function in the code. (lineY gets set to tell the d3.svg.line() instance how to set the y value of a given point d)

我将其更改为

var lineY = function(d, dataIndex, groupIndex) {
    return _chart.y()(_chart.valueAccessor()(d));
};

之前写的 lineY 正在查找数组中的y值，而不是使用绑定到组元素的数据。此数组在我进行更改之前已经设置了数据，因此它仍在使用旧的预简化数据。

The way lineY was written before, it was looking up the y value in an array, rather than using the data bound to the group element. This array had it's data set before i made my changes, so it was still using the old, pre-simplification data.

这篇关于扩展dc.js以添加“simpleLineChart”图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！