Question

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

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

在我的图表视图中，我有

create_bar: function(){

    var chart = d3.select("div#chart");

    timeline.selectAll("div")
    .data(Myapp.chart.models)
    .enter()
    .append(function(d){console.log(d);
                        var bar = new Myapp.Views.ChartBar({model:d});
                        return bar.el;

        });

 }

但不幸的是，看起来append失败了一个函数。

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

有关如何执行此操作的任何建议？

Answer 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});

d3数据项为骨干视图

1 个答案: