扩展dc.js以添加“simpleLineChart”图表

编辑看这里为我正在尝试做的非工作示例：http://bl.ocks.org/elsherbini/5814788

我使用dc.js来绘制从我的大学蜜蜂蜂巢收集的数据。 我将每个数据库更改的新数据推送到图表上（使用Meteor的魔力）。 当数据库超过5000条记录时，重新渲染行会变得非常缓慢。 所以我想使用simplify.js在渲染之前预处理行。 要查看我在说什么，请访问http://datacomb.meteor.com/。 几秒后页面就会冻结，所以要警告。

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

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 ，并根据其简化算法返回一个包含较少元素的新数组。

dc.js使用crossfilter.js。 dc.js图表​​与特定的交叉过滤器维度和组相关联。 最终，它使用来自someGroup().all()的数据作为数据传递给d3.svg.line(). 我无法找到在dc.js源文件中发生的情况 ，但这是我需要介入的地方。 我想找到这个方法，并在我正在制作的dc.simpleLineChart对象中覆盖它。

我在想这样的事情

_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
}

任何人都可以帮助我确定哪种方法需要重写，甚至更好，告诉我该怎么做？

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

编辑：

我想我可能已经找到了我需要覆盖的功能。 原来的功能是

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;
}

但是，当我制作一个简单的线图时，它只是一个带有tolerance()和highQuality()方法的线图。 请参阅：http://bl.ocks.org/elsherbini/5814788

---

那么，我几乎做了我想要做的事情。 http://bl.ocks.org/elsherbini/5814788

关键是不仅要修改createGrouping功能，而且还lineY在对码功能。 （ lineY被设置为告诉d3.svg.line()实例如何设置给定点的y值d ）

我改变了

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

lineY之前写过的方式是，它查找数组中的y值，而不是使用绑定到group元素的数据。 这个数组在我进行修改之前就有了它的数据集，所以它仍然使用旧的，预先简化的数据。

链接地址: http://www.djcxy.com/p/32729.html

上一篇: Extending dc.js to add a "simpleLineChart" chart

下一篇: Replace crossfilter data, restore dimensions and groups