javascript - Inline D3 sparklines in a table alongside text -

say if there table this:

var data = [     ['orange', 'orange', [6,3,3,2,5]],     ['apple', 'red', [6,2,6,5,5]],     ['grape', 'purple', [9,1,2,3,1]] ] 

i'd strings represented strings, number array represented d3 line chart. if it's text care about, can selectall td elements , insert text.

var tcells = trows     .selectall("td")     .data(function(d, i) { return d; })     .enter()     .append("td")     .text(function(d, i) { return d; }); 

the 3rd column text i'd update graphs or alternatively append column of graphs. lines function creates line graph, call lines() passes data 3rd column each row.

trows.selectall("td")     .data(function(d) {return d[2]}) // scope out data 3rd column     .enter()     .append("td")     //.call(lines([3,8,2,5,8,4])); // works     .call(lines);                // doesn't 

my d3 knowledge spotty not clear on how data , selection passed.

here full code: jsfiddle link

you're confusing selection.call(func) method selection.each(func) method.

call convenience method calling functions accept selection whole parameter. trows.call(lines) equivalent lines(trows), except can part of method chain.

each used call function once each element in selection, passing data , index parameters.

as why trows.call(lines([3,8,2,5,8,4])) "works", sort-of works. you're calling function lines, hard-coded data array, function doesn't return anything, there nothing call on selection itself. (if don't understand difference, might find answer useful.)

your method appends line graph body, doesn't insert table. have following code acknowledge doesn't work:

// dynamic selection doesn't this.append("td").append('svg')     .attr('width', width).attr('height', height)     .append('path').attr('class','line')     .datum(data).attr('d', line); 

there few reasons failing:

• in context you're calling function, lines([3,8,2,5,8,4]) being called directly, this value not set, point window object;
• even if calling function each method (which sets this value), this point dom node, not selection can call d3 methods for;
• except in specific case, wouldn't point dom node, because you're calling enter() selection in haven't appended new nodes yet.

in summary, things working:

1. in main program, use each call lines function, after creating new <td> elements:

   trows.selectall("td.graph")        //use class don't re-select existing <td> elements   .data(function(d) {return [d[2]];})      // value returned data function must array      // containing data objects each new element create --       // want 1 element containing entire data array,       // not individual elements each number, wrap in array   .enter()     .append("td")     .attr("class", "graph")     .each(lines);  

2. in lines function, re-select this element (which point just-created <td>), , append sparkline svg it:

   d3.select(this).append('svg')         .attr('width', width)         .attr('height', height)      .append('path')         .attr('class','line')         .datum(data)         .attr('d', line); 

http://jsfiddle.net/lgq6ct9f/9/
(with other clean-up don't have function definition in middle of main program)