1

5 分ごとに新しいデータを受信し、新しいデータをグラフのグループに追加する Meteor アプリケーションを作成しています。ユーザーがデータを探索できるようにするため、dc.js を使用してグラフを作成しています。プロットする前に、simplify.js を使用して線を単純化したい。

パスが dc.js ライブラリで計算される場所を理解するのに苦労しています。コードはここで見つけることができます 。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 メソッドがその仕事をしているようです。2548 行目の lineChart に対して plotData が定義されています。

_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の行情報なので、「M100,50L100,55,L101,75」のような文字列です。この文字列がソース コードのどこに構築されているかわかりません。path 要素を svg 要素に追加する前に、このステップに介入して行を単純化したいと思います。

私を助けるためにdc.jsに精通している人はいますか？前もって感謝します。

4

1 に答える 1

2 
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 ライン ジェネレータ関数によって生成されます。simple.js を使用する難しさは、d3 ライン ジェネレーターがポイント ベクトルの代わりに svg:path d 属性を直接生成することです。そのため、この場合に simple.js を使用するには、おそらくカスタム ライン ジェネレーターを実装する必要があります。ただし、d3.svg.line は中間点として点ベクトルを生成します

于 2013-06-11T22:03:31.230 に答える