问带主干的D3 /带Angular的D3 /带Ember的D3？

EN

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

D3 (理所当然)没有提供视图管理系统，而正是Backbone接管了视图管理系统。Backbone视图充当d3图表的包装器。可以预测的是，骨干模型作为d3图数据的载体。但更有趣的是，我们还发现它们可以很好地控制主干视图中包含的d3代码的外观和行为；本质上，它们充当view models。由于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

我们将此模型传递到一个新视图中：

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

视图可能是这样实现的：

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

我在一些仪表板上使用过带有Angular的D3，它工作得非常好。我从来没有真正使用过Backbone，也没有使用过D3，所以我不能将两者进行比较。我之所以选择Angular来补充D3，是因为在我看来，最近D3社区在你提到的三个选项中的大多数都在使用D3和Angular，所以有很多可用的资源。最近有一整本书致力于将D3和Angular结合使用。我以前也用过Angular，并且知道指令。指令(在Angular中，它是一种扩展html标签的方式)非常适合与D3配合使用。每个图表都可以成为一个指令，然后可以非常容易地重用图表，只更改$scope数据。以下是我在将两者结合起来时发现的一些有用资源：

https://www.youtube.com/watch?v=aqHBLS_6gF8

https://leanpub.com/d3angularjs

http://plnkr.co/edit/WnoCtNPV9azj0oPwv9kM?p=preview

http://vicapow.github.io/angular-d3-talk/slides/demos/a-donut-chart-editor/index.html#/

我最近就这个话题做了一次演讲，这里有一些链接：Video·Code·Slides

我用类似的方法做了一些较小的项目来满足have，但最近开始探索Ember + D3。我还没有做太多，但我认为Ember可以提供很多东西来简化这些类型的应用程序的构建。一些事情会浮现在脑海中：

• ：您将经常显示聚合，因此使用计算属性对数据进行切片意味着只要数据发生更改，就必须调用图表的更新函数，这样就可以了。不再担心当数据的某个特定部分发生更改时，将事件发送到每个视图。此外，这些属性可能是控制器上的属性，而不是在特定的图表或视图中计算，这将使重用变得更容易。
• Storing状态：我很难弄清楚在Backbone中存储状态的最佳方式。我一开始试图通过事件来协调所有事情，但最终得到了一个单独的状态模型，它充当了整个系统的大脑。

我没有花太多时间使用Backbone的路由器，但Ember的router + focus on state到目前为止让我的设计挑战变得更容易。如果你在系统中构建，你可以点击你的过滤器和控件，一切都会正常工作。在Backbone中可能会做完全相同的事情，但是有一些东西可以严重地减少你的认知负荷。您也可以显式地使用StateManager对象-这里可能有一些非常有趣的解决方案，尽管我还没有研究过它们。

同样，我对这种组合的经验很浅，但如果我的直觉是正确的，那么在Ember的约定中构建可视化将会有很多收获。

如果你还没有接触到这一点，Square put up an article简要介绍了他们使用Ember + D3构建交互式仪表板的经验。

让我们了解您的最新进展+您遇到的任何见解，祝您好运！