1

我正在使用 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，以及一些数据点。

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

4

1 回答 1

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});
于 2012-10-29T05:42:12.543 回答