Question

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

我很难确定在dc.js库中计算路径的位置。可以找到代码here 在dc中，lineChart来自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时，它是一组函数。＆＃34; d＆＃34;路径的属性是svg行信息，因此它是一个看起来像＆＃34; M100,50L100,55，L101,75＆＃34;等等。 我无法在源代码中找到构造此字符串的位置。我想在此步骤中进行干预，以便在将路径元素添加到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会生成点向量作为中间层

使用带有dc.js的simplify.js来简化一行

1 个答案: