Javascript 将Meteor与高级SVG或画布输出一起使用的模式

使用Meteor进行非主要基于HTML的反应式数据显示明智吗

具体来说，我希望将图形数据库显示为一组由线连接的框。我希望允许与这些框进行实时交互，并且我也希望它们是反应式的，因此如果一个用户编辑数据，当前查看图表的任何其他用户的显示都将更新

Meteor的反应性似乎很好，但我发现的大多数示例都集中在HTML模板或非常简单的API交互上，用于向地图添加pin等操作

---

我目前正在考虑使用SVG或Canvas来显示图形数据库，但我非常不确定如何最好地将其与Meteor和/或其他库（如D3）集成。

我发现Meteor与Canvas完美结合，我不知道我所做的是否是最佳实践，但我使用Kinetic.js获得了最佳效果（Meteor可通过“mrt install kineticjs”获得，我使用模板引擎调用在画布上设置元素的函数，这是我用于将玩家放置在地图上的代码的一个小示例：

模板：

<template name="canvas_map">
<div id="grid_map" class="grid"></div>
{{#with clear_canvas}}
    {{#each human}}
        {{handle_member_pos}}
    {{/each}}
{{/with}}

---

正如我所说，我不确定这是否是最佳实践，但它对我来说非常有效，希望这能有所帮助。

Blaze（流星模板渲染引擎）有一个本机SVG支持，根据我的经验，它运行得非常好。好问题。目前在Meteor中使用SVG的最大困难之一是选择使用完全反应式SVG还是使用D3的基于数据连接的良好功能，这对于高效地连接到集合有些棘手。我只是不知道提克，最近有一本“流星食谱”关于使用D3的入门那个例子对这个问题很有启发性，实际上让我对Meteor有了一点了解，所以非常感谢！很高兴我能提供帮助，同时，我强烈建议使用Kinetic.js，通常在画布上，一旦你在画布上绘制元素，你就会失去与元素的联系，Kinetic允许你与元素保持联系永远的爱。

     Template.canvas_map.clear_canvas = =>
        if Session.get('init')
            kinetic_elements.stage = new Kinetic.Stage
                container: 'grid_map'
                width: 385
                height: 375
            kinetic_elements.layer = new Kinetic.Layer()
        else
            false
 Template.canvas_map.handle_member_pos = ->
        [x, y] = pos_to_str @profile.pos
        left = Math.floor(11 * x)
        top = Math.floor(11 * y)
        name = @profile.name
        unless kinetic_elements.avatars[name]?
                imageObj = new Image()
                imageObj.onload = =>
                    element = new Kinetic.Image
                        x: left
                        y: top
                        image: imageObj
                        width: 50
                        height: 50
                    element.on 'click', (evt) =>
                        Session.set 'selected', @profile._id
                        window.propogation = false
                        false
                    kinetic_elements.layer.add element
                    kinetic_elements.avatars[name] = [element, text]
                    kinetic_elements.stage.add kinetic_elements.layer
                imageObj.src = 'human.png'
            else
                element = kinetic_elements.avatars[name]
                layer = kinetic_elements.layer
                element.setX left
                element.setY top
                layer.draw()
        return