Question

I’m creating a barchart with d3 where the data is in a backbone collection.
I want the user to be able to interact with the bars in the chart, selecting them, editing data, etc. etc.

I figured the best way to do this was to create a view for the chart, and a separate view for the bars.

in my chart view, I have

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;

        });

 }

but unfortunately, it looks like append fails with a function.

I’m looking at putting some moderately complex html within the bar div, as well as a few data-points.

Any suggestions on how to do this?

Answer 1

Backbone views with d3 make kind of an odd mix, but here’s one way it might work:

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
  }

EDIT:
The last 2 lines can be combined into a single one, skipping the call to setElement():

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