Question

我在Meteor中使用d3.js并渲染一个简单的形状，该形状取决于一系列函数结果中的单个值。

首次运行计算后，在第二次延迟后，该值会显示在页面的其他位置，但不会渲染形状。

我的控制台显示一系列错误消息

"Exception in template helper: TypeError: Cannot read property of undefined" that refer to the functions.

但计算运行正常，因此必须在函数完成之前抛出这些错误。

刷新浏览器后，形状呈现，我可以根据需要进行更新。

这在早期版本中实际上运行良好，但我在初始计算中增加了一些复杂性，因此我想知道是否需要延迟才能完成。在某些计算完成之前，是否可以延迟D3形状的初始渲染？我正在使用自动运行块来更改数据，但这对初始渲染没有帮助。

Template.Val.onRendered (function () {
const self = this;

var valActive = UI._globalHelpers.resultValue();
//valActive is calculated using a series of functions
//...other variables

var barContainer = d3.select("#bar" + valId)
    .append("svg")
    .attr("id", "svg-bar");

var bar = barContainer.append("rect")
    .attr("x", startPct + "%")
    .attr("y", 0)
    .attr("height", 50)
    .attr("width", rangePct + "%")
    .attr("id", "bar" + valId);

self.autorun(function() {
var valActive = UI._globalHelpers.resultValue();
//valActive is calculated using a series of functions
//...other variables

    barContainer.select("#bar" + valId)
        .transition()
        .duration(250)
        .attr("x", startPct + "%")
        .attr("y", 0)
        .attr("height", 50)
        .attr("width", rangePct + "%");
    });
});

编辑：额外的计算代码：

getAverageVal = function(array) {
//calculates average of an array of ratios stored in Valuation document
};

getMedianVal = function(array) {
//calculates median of an array of ratios stored in Valuation document
};

getValAll = function(valuationId) {
//creates object of all average and median ratios
//calls getMedianVal() and getAverageVal()
};

getVal = function(valuationId) {
//selects average or median
//calls getValAll()
};

getResults = function(chartId, valuationId){
//creates object of all valuations (company data * ratio)
//calls getVal()
};

Template.registerHelper('resultValue',function(chartId, valuationId){
//selects one valuation
//calls getResults()
});

延迟初始D3渲染，直到计算完成

0 个答案: