backbone.js - D3 with Backbone/D3 with Angular/D3 with Ember？

Question

我正在开发一个中型应用程序，其中将包含大量 D3 图表/交互。我想知道是否有人尝试过将 Backbone、Angular 或 Ember 与 D3 一起使用，如果是，那么哪一个似乎最适合前端 MV* 框架。该应用程序不会进行大量的 CRUD 操作，主要是交互式图表和小部件来操作它们。

任何意见表示赞赏!

Answer 1

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

D3(理所当然地)不提供 View 管理系统，这是 Backbone 接管的地方。主干 View 充当 d3 图表的包装器。可以预见的是，主干模型充当了 d3 绘图数据的载体。但更有趣的是，我们还发现它们可以很好地控制包含在 Backbone View 中的 d3 代码的外观和行为；基本上他们担任 view models .由于 d3 促进将函数作为参数传递给其他函数，这些主干模型作为 View 模型最终在其中包含许多函数。

下面是一个简单的例子，但图片是用几十个属性来做的。在这里使用 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

我们将此模型传递到一个新 View 中:

barChartView = new BarChartView
  el: "#the_bar_chart"
  model: barChartModel

一个 View 可能是这样实现的:

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()