d3 数据项作为主干视图

Posted 2023-02-22

【中文标题】d3 数据项作为主干视图

【英文标题】：d3 data items as backbone views

【发布时间】：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，以及一些数据点。

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

【参考方案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);