D3与骨干/ D3与角/ D3与Ember？ [英] D3 with Backbone / D3 with Angular / D3 with Ember?

问题描述

我的工作就是要包括大量的图表D3 /它相互作用的中型应用。我不知道是否有人试图利用骨干，角，或恩伯，D3，如果是这样，哪一个看起来像一个前端MV *框架最合适的。该应用程序不会做一大堆CRUD操作，主要是交互式的图表和窗口小部件操纵它们。

I'm working on a medium sized application that is going to include a lot of D3 charts / interactions in it. I'm wondering if anyone has tried to use Backbone, Angular, or Ember with D3, and if so, which one seems like the best fit for a front end MV* framework. The application won't be doing a whole lot of CRUD operations, mainly interactive charts and widgets to manipulate them.

任何意见AP preciated！

Any comments appreciated!

推荐答案

我们广泛使用上包括多的场景一个项目，骨干pretty D3。每个场景包含一套不同的图表，和一个用户有能力导航从一个场景到另一个。这些场景及其内容都需要的是高度可配置的（例如标签颜色和格式，或说明哪些数据应PARAMS在给定轴绘制）。

We used d3 with Backbone pretty extensively on a project that consisted of multiple "scenes". Each scene contained a set of different charts, and a user has the ability navigate from one scene to another. These scenes and their content all needed to be highly configurable (e.g. label colors and formatting, or indicating which data params should be plotted on a given axis).

D3（理所当然），不提供视图管理系统，这是在主干接任。主干查看担任包装为D3图表。 predictably，骨干模型担任D3-绘制数据的载体。但更有趣的是，我们也发现，他们服务以及控制包含在骨干视图中的D3 code的外观和行为的一种手段;本质上，他们曾担任视图模型的。由于D3促进传递函数作为参数到其他功能，这些骨干机型，作为视图的模型结束了在他们举办的许多功能。

D3 (rightfully) doesn't provide a view management system, which is where Backbone took over. Backbone Views served as wrappers for d3 charts. Predictably, Backbone Models served as the carriers of the d3-plotted data. But more interestingly, we also found that they served well as a means of controlling the appearance and behavior of the d3 code contained within the Backbone Views; essentially they served as view models. Since d3 promotes passing functions as arguments into other functions, these Backbone Models-as-view-models ended up holding many functions in them.

下面是一个简单的例子，但画面与数十家物业这样做。使用的CoffeeScript在这里，因为它是短（更好）。

The following is a simplistic example, but picture doing this with dozens of properties. Using coffeescript here, because it's shorter (and better).

首先，有模型，这是我们内部实例（例如）路由器的事件处理程序。我们填充此模型将应用到D3选择功能。

First, there's the model, which we instantiate inside (for example) a router's event handler. We populate this model with functions that will be applied to d3 selectors.

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

我们通过这个模型到一个新的观点：

We pass this model into a new view:

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

一个视图可能是这样实现：

A view might be implemented like this:

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

这篇关于D3与骨干/ D3与角/ D3与Ember？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！