7

D3.jsビジュアライゼーションを Meteor アプリに統合しようとしています。<div>ページが読み込まれた後、D3 関数は、利用可能なデータに基づいて、テンプレート内の に DOM 要素を挿入します。

ただし、ページのどこかにリアクティブな更新があると、Meteor は D3.js 関数によって挿入されたテンプレートのコンテンツをダンプします。要素を再挿入することはできますが、望ましくないちらつきやパフォーマンスの低下につながります。

外部から注入された要素のこのドロップを抑制する方法についてのアイデアはありますか? これらの要素は元々テンプレートの一部ではなかったため、Meteor の「クリーンアップ」プロセスの一部として破棄されたようです。

4

2 に答える 2

1

バージョン 0.4.0 での Spark テンプレート エンジンの導入により、この問題に対処するために {{#constant}} ブロック ヘルパーが導入されました。

http://meteor.com/blog/2012/08/31/introducing-spark-a-new-live-page-update-engine

HTML テンプレートは次のようになります。

<template name="samplePageTemplate">
    <div id="samplePage" class="page">
        {{#constant}}
        <div id="sampleGraph"></div>
        {{/constant}}
    </div>
</template>

そして、javascriptは次のようになります...

Template.samplePageTemplate.destroyed = function () {
    this.handle && this.handle.stop();
};
Template.samplePageTemplate.rendered = function () {
    self.node = self.find("svg");
    if (!self.handle) {
        self.handle = Meteor.autorun(function(){

            $('#sampleGraph').html('');
            renderChart();

        });
    };
};

function renderChart(){

    // lots of d3 chart specific stuff 

    var vis = d3.select("#sampleGraph").append("svg:svg")
        .attr("width", window.innerWidth)
        .attr("height", window.innerHeight)
        .append("svg:g")
        .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

    // more d3 chart specific stuff

    });
};

self.handle の代わりに self.node を使用しなければならないこともありましたが、それ以外はかなり簡単です。

于 2013-01-20T14:32:57.933 に答える