Backbone.js D3带主干/D3带角/D3带余烬？

我正在开发一个中等规模的应用程序，它将包含许多D3图表/交互。我想知道是否有人尝试过在D3中使用主干、角度或余烬，如果是这样的话，哪一个看起来最适合前端MV*框架。应用程序不会执行大量CRUD操作，主要是交互式图表和小部件来操作它们

---

任何意见感谢

在一个包含多个“场景”的项目中，我们非常广泛地使用了具有主干的d3。每个场景都包含一组不同的图表，用户可以从一个场景导航到另一个场景。这些场景及其内容都需要高度可配置（例如，标签颜色和格式，或指示应在给定轴上绘制哪些数据参数）

D3（正确地说）没有提供视图管理系统，这是主干网接管的地方。主干视图用作d3图表的包装。可以预见，主干模型作为d3绘制数据的载体。但更有趣的是，我们还发现它们可以很好地控制主干视图中包含的d3代码的外观和行为；从本质上说，它们充当了一个角色。由于d3提倡将函数作为参数传递给其他函数，因此这些作为视图模型的主干模型最终包含了许多函数

下面是一个过于简单的示例，但请想象一下如何使用几十个属性来执行此操作。在这里使用coffeescript，因为它更短（更好）

首先是模型，我们在路由器的事件处理程序中（例如）实例化它。我们使用将应用于d3选择器的函数填充此模型

barChartModel = new Backbone.Model
  barColor: (d, i) -> if d.profits < 0 then "red" else "green"
  barLengthVal: (d, i) -> return bar.profits #// profits will be the prop we graph
  onClick: (d, i) ->
    console.log "We are", if d.profits <= 0 then "losing" else "making", "money"
  data: someJsonWeLoaded

视图可以这样实现：

class BarChartView extends Backbone.View
  render: ->
    bars = d3.select(@el)
      .selectAll('.bar')
      .data(@model.get 'data') # <---- THIS

    bars.enter()
      .attr('class', 'bar')
      .attr('fill', @model.get 'barColor') # <---- THIS
      .attr('height', (d, i) ->
        @barLengthScale @model.get('barLengthVal')(d, i) # <---- AND THIS
      )
      .on('click', @model.get 'onClick') # <---- INTERACTIVITY TOO

  initialize: ->
    @barLengthScale = d3.scale.linear()
      .domain([-100, 100]) # <---- THIS COULD ALSO COME FROM MODEL
      .range([0, @$el.height()])
    @render()

class BarChartView扩展了主干。视图
渲染：->
条形=d3。选择（@el）
.selectAll（“.bar”）
.data（@model.get'data'）#我最近就这个话题做了一次演讲，这里有一些链接：··


我用与meetamit类似的方法做了一些较小的项目，但最近开始探索Ember+D3。我还没有做太多，但我认为余烬有很多可以提供的，可以简化构建这些类型的应用程序。我想到的一些事情：


：您经常会显示聚合，因此使用计算属性切片数据意味着您只需在数据更改时调用图表的更新函数，就可以了。不再担心向每个视图发送事件，当数据的某个特定部分发生更改时，这些视图将发生更改。此外，这些可能是控制器上的属性，而不是在特定的图表或视图中进行计算，这将使重用更加容易

存储状态：我很难找到在主干中存储状态的最佳方法。我开始试图通过事件来协调一切，但最终得到了一个独立的状态模型，它充当了整个系统的大脑

我并没有太多时间使用主干网的路由器，但恩伯的路由器+专注于状态，使这个设计挑战到目前为止对我来说更容易。如果你在系统中构建，你可以点击你的过滤器和控件，一切正常。在主干中也可以做完全相同的事情，但有一点是值得一提的，那就是可以大大降低你的认知负荷。您还可以显式地使用对象-这里可能有一些非常有趣的解决方案，尽管我还没有探讨它们


同样，我对这个组合的经验是肤浅的，但如果我的直觉是正确的，那么在余烬的约定中构建可视化将会有很多好处

如果您还没有遇到这个问题，请简要介绍他们使用Ember+D3构建交互式仪表板的经验

让我们了解您的最新进展以及您遇到的任何见解，祝您好运
 我在一些仪表板上使用了D3和Angular，效果非常好。我从来没有真正使用过主干，也没有使用过D3，所以我无法比较两者。我选择Angular来补充D3，因为在我看来，D3社区最近一直在使用D3，而Angular是您提到的三个选项中的大多数，所以有很多可用的资源。最近有一整本书致力于使用D3和Angular。我以前也使用过Angular，并且知道指令。指令（在角度上，它是扩展html标记的一种方式）非常适合与D3啮合。每个图表都可以成为一个指令，然后可以非常轻松地重用图表，只更改$scope数据。以下是我在结合这两种方法时发现的一些有用的资源：







我的团队在d3中使用了角度和主干，出于不同的原因，我们都喜欢

骨干
主干网对于您构建应用程序的方式没有那么固执己见，如果您需要定制数据处理方式以提高性能，这一点很好。通常将d3与主干视图集成

使用主干网的一个挑战是，但是使用。此外，如果您想使用或之类的工具，那么木偶的事件聚合器（特别是）非常适合用于协调视图的集中式数据源

有棱角的
Angular更具结构化，它允许您快速构建酷炫的功能。它有一个陡峭的学习曲线，但我发现现在我已经了解angular（在过去的4周内使用它开发了一个应用程序），我发现我可以在主干中完成许多相同的事情，而不必求助于任何太粗糙的东西

与主干木偶网中的请求-响应对象一样，使用angular services可以快速构建复杂视图。对于复杂的数据可视化，您需要避免使用angular对$scope数据进行脏检查，以保持
class BarChartView extends Backbone.View
  render: ->
    bars = d3.select(@el)
      .selectAll('.bar')
      .data(@model.get 'data') # <---- THIS

    bars.enter()
      .attr('class', 'bar')
      .attr('fill', @model.get 'barColor') # <---- THIS
      .attr('height', (d, i) ->
        @barLengthScale @model.get('barLengthVal')(d, i) # <---- AND THIS
      )
      .on('click', @model.get 'onClick') # <---- INTERACTIVITY TOO

  initialize: ->
    @barLengthScale = d3.scale.linear()
      .domain([-100, 100]) # <---- THIS COULD ALSO COME FROM MODEL
      .range([0, @$el.height()])
    @render()