使用simplify.js和dc.js简化行

Question

我正在编写一个Meteor应用程序，它将每5分钟接收一次新数据，并将新数据添加到一组图表中。我使用dc.js制作图表，因为我希望用户能够浏览这些数据。我想在绘制它之前先使用simplify.js简化这条线。

--我很难在dc.js库中找出路径的计算位置。代码可以在dc中找到这里，这是coordinateGridChart的继承。coordinateGridChart有一个doRender()方法(从第1408行开始)：

_chart.doRender = function () {
    if (_x == null)
        throw new dc.errors.InvalidStateException("Mandatory attribute chart.x is missing on chart["
            + _chart.anchor() + "]");

    _chart.resetSvg();

    if (_chart.dataSet()) {
        _chart.generateG();

        generateClipPath();
        prepareXAxis(_chart.g());
        prepareYAxis(_chart.g());

        _chart.plotData();

        _chart.renderXAxis(_chart.g());
        _chart.renderYAxis(_chart.g());

        _chart.renderBrush(_chart.g());

        enableMouseZoom();
    }

因此，plotData方法似乎可以完成这项工作。plotData是为第2548行的lineChart定义的：

_chart.plotData = function() {
    var groups = _chart.allGroups();

    _chart.calculateDataPointMatrixForAll(groups);

    for (var groupIndex = 0; groupIndex < groups.length; ++ groupIndex) {
        var group = groups[groupIndex];
        plotDataByGroup(groupIndex, group);
    }
};

function plotDataByGroup(groupIndex, group) {
    var stackedCssClass = getStackedCssClass(groupIndex);

    var g = createGrouping(stackedCssClass, group);

    var line = drawLine(g, stackedCssClass, groupIndex);

    if (_renderArea)
        drawArea(g, stackedCssClass, groupIndex, line);

    if (_chart.renderTitle())
        drawDots(g, groupIndex);
}

function getStackedCssClass(groupIndex) {
    return dc.constants.STACK_CLASS + groupIndex;
}

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 drawLine(g, stackedCssClass, groupIndex) {
    var linePath = g.select("path.line");

    if (linePath.empty())
        linePath = g.append("path")
            .attr("class", "line " + stackedCssClass);

    linePath[0][0][dc.constants.GROUP_INDEX_NAME] = groupIndex;

    var line = d3.svg.line()
        .x(lineX)
        .y(function(d, dataIndex) {
            var groupIndex = this[dc.constants.GROUP_INDEX_NAME];
            return lineY(d, dataIndex, groupIndex);
        });

    dc.transition(linePath, _chart.transitionDuration(),
        function(t) {
            t.ease("linear");
        }).attr("d", line);

    return line;
}

var lineX = function(d) {
    return _chart.margins().left + _chart.x()(_chart.keyAccessor()(d));
};

var lineY = function(d, dataIndex, groupIndex) {
    var y = _chart.getChartStack().getDataPoint(groupIndex, dataIndex);
    if(y >= _chart.dataPointBaseline())
        y += _chart.dataPointHeight(d, groupIndex);
    return y;
};

那么，添加的路径是否是.attr("d", line)出现的位置？当我console.log line时，它是一组函数。路径的"d“属性是svg行信息，因此它是一个字符串，类似于”M 100，50L100，55，L 101，75“等等。我找不到这个字符串在源代码中的构造位置。在将path元素添加到svg元素之前，我想在这一步进行干预以简化行。

任何熟悉dc.js的人能帮我解决问题吗？提前谢谢。

Answer 1

var line = d3.svg.line()
        .x(lineX)
        .y(function(d, dataIndex) {
            var groupIndex = this[dc.constants.GROUP_INDEX_NAME];
            return lineY(d, dataIndex, groupIndex);
        });

线路径是由这个标准的d3线路生成器函数生成的。尽管使用simplify.js的困难在于d3行生成器直接生成svg:path d属性，而不是点向量，所以您可能需要实现自定义行生成器才能在本例中使用simplify.js。然而，d3.svg.line确实生成了点矢量作为中介