sách gpt4 ai đã đi

javascript - Meteor 中的模板级 react 性

In lại 作者:行者123 更新时间:2023-11-30 16:17:46 28 4
mua khóa gpt4 Nike

我正在解决一个问题,我想在仪表板中将数据显示为图表(通过 perak:c3 )和表格(通过 aslagle:reactive-table )。我的问题是数据是从 MongoDB 中的集合中提取的,它的格式可以立即通过 c3 进行绘图,但需要转换为本地集合以供 react 表包使用,如 this answer 中所建议的那样上一个问题。

当我更改要显示的数据集时,我希望更新图表和表格。这需要更改本地集合中的值,但是,这会减慢速度,因此不是平滑地重绘图表,而是在页面上卡住,然后显示新数据。

我创建了一个示例项目 on GitHub here所以这个问题很容易被复制。如果您运行该应用程序并在浏览器中选择一个数据集,您将明白我的意思

nhập mô tả hình ảnh ở đây

要查看我想在图表中保留的 react 行为,请转到 client/templates/dashboard/dashboard.html 并简单地注释掉表格模板 {{> dashboardTable}}

nhập mô tả hình ảnh ở đây

现在更改数据集以查看图表如何平滑地重新绘制。本质上,我试图确保模板 dashboardChartdashboardTable 彼此独立呈现。


làm mới

遵循迈克尔·弗洛伊德关于使用超时的建议有一点帮助

Meteor.setTimeout(function(){createLocalCollection(data)},200);

虽然图表绘制顺利,但当表格完成填充时,图表会再次绘制。看起来它跳转到了一些我无法理解的中间状态。 Here is a video表明我的意思。

1 Câu trả lời

我将其添加为单独的答案,因为这是一种完全不同的方法。

在 d3 中使用 onRendered 回调来调用本地集合更新。

你在哪里:

chart = c3.generate({
bindto: '#dataset-chart',

hiện hữu dashboard_chart.js 中,添加:

chart = c3.generate({
onrendered: createLocalCollection(),
bindto: '#dataset-chart',

当然,您需要从事件处理程序中删除 createLocalCollection(data).

为了避免必须通过 d3 中的 onrendered 处理程序传递数据上下文,还要更新您的 createLocalCollection 函数以使用 react 变量 datasetID您之前定义以建立当前数据集:

var createLocalCollection = function() {
var values = My_First_Collection.find({datasetID: datasetID.get()}).fetch();
var tempDoc = {};
local.remove({});
tempDoc = {};
for (var i in values[0].value) {
tempDoc.value = values[0].value[i];
tempDoc.date = values[0].date[i];
local.insert(tempDoc);
}
};

使用这种方法,您可以让 D3 告诉您图表渲染何时完成,然后您的表格就可以开始填充了。结果是瞬时图表更新,然后是表格更新。也没有超时问题。

关于javascript - Meteor 中的模板级 react 性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35227934/

28 4 0
行者123
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com