Question

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

然而，只要页面上的任何地方都存在被动更新，Meteor就会转储由我的D3.js函数注入的模板内容。我可以重新插入元素，但这会导致不希望的闪烁并降低性能。

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

Answer 1

您是否尝试过为D3注入元素（或至少是父元素）提供唯一ID？来自doc（http://docs.meteor.com/#livehtml）：

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

Answer 2

随着版本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，但除此之外它应该是相当直接的。

防止模板丢弃DOM元素

2 个答案: