d3 数据项作为主干视图答案

【问题标题】：d3 data items as backbone viewsd3 数据项作为主干视图
【发布时间】：2012-10-18 10:01:08
【问题描述】：

我正在使用 d3 创建一个条形图，其中数据位于主干集合中。我希望用户能够与图表中的条进行交互、选择它们、编辑数据等。

我认为最好的方法是为图表创建一个视图，并为条形图创建一个单独的视图。

在我的图表视图中，我有

创建栏：函数（）{ var chart = d3.select("div#chart"); 时间线.selectAll("div") .data（Myapp.chart.models）。进入（） .append(function(d){console.log(d); var bar = new Myapp.Views.ChartBar({model:d}); 返回 bar.el; }); }

但不幸的是，append 似乎因函数而失败。

我正在考虑在 bar div 中放置一些中等复杂的 html，以及一些数据点。

关于如何做到这一点的任何建议？

【问题讨论】：

标签： backbone.js d3.js

【解决方案1】：

d3 的主干视图有点奇怪，但这里有一种可能的工作方式：

timeline.selectAll("div")
  .data(Myapp.chart.models)
  .enter()
  .append('div')// or 'span' or even Myapp.Views.ChartBar.prototype.el
  .each(function(d, i) {
    var bar = new Myapp.Views.ChartBar({model:d});
    bar.setElement(this);// Here "this" is the dom element
  }

编辑：最后两行可以合并为一行，跳过对setElement()的调用：

var bar = new Myapp.Views.ChartBar({model:d, el:this});

【讨论】：