D3 with Backbone/D3 with Angular/D3 with Ember? [英] D3 with Backbone / D3 with Angular / D3 with Ember?

问题描述

我正在开发一个中型应用程序，其中将包含大量 D3 图表/交互.我想知道是否有人尝试过将 Backbone、Angular 或 Ember 与 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.

感谢任何评论！

推荐答案

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

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(理所当然地)不提供视图管理系统，而 Backbone 正是在此系统中接管了它.主干视图充当 d3 图表的包装器.可以预见的是，主干模型充当了 d3 绘图数据的载体.但更有趣的是，我们还发现它们可以很好地控制包含在 Backbone 视图中的 d3 代码的外观和行为；本质上，它们充当了视图模型.由于 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 with Backbone/D3 with Angular/D3 with Ember?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！