7

我正在尝试将D3.js可视化集成到 Meteor 应用程序中。<div>页面加载后，D3 函数根据可用数据将 DOM 元素注入到我的模板中。

然而，每当页面上的任何地方有响应式更新时，Meteor 都会转储由我的 D3.js 函数注入的模板的内容。我可以重新插入元素，但这会导致不希望的闪烁和性能下降。

关于如何抑制这种外部注入元素的下降的任何想法？我认为，由于这些元素最初不是模板的一部分，因此它们在 Meteor 的“清理”过程中被丢弃。

4

2 回答 2

1

您是否尝试过为 D3 注入的元素（或至少是父元素）赋予唯一的 ID？从文档（http://docs.meteor.com/#livehtml）：

只需确保您的每个可聚焦元素都具有唯一的 id，或者在具有 id 的最近的父级中具有唯一的名称。Meteor 将保留这些元素，即使它们的封闭模板被重新渲染，但仍会更新它们的子元素并复制任何属性更改。

于 2012-05-14T23:43:25.623 回答
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.node 而不是 self.handle，但否则它应该是相当直接的。

于 2013-01-20T14:32:57.933 回答