Dfyjkt

I am trying to create a table with d3js in node. For the table I'd like to create a column which is sort of a gantt chart. For that I need a svg element in the last column. But I am having difficulties understanding how I can run a function for the last column which use values for other columns and creates a svg element.

Code creating columns and rows:

 this.thead.selectAll("th")
 .data(this.HeadColumns)
 .enter()
 .append("th")
 .text(function(d) return d; );


 let rows = this.tbody.selectAll("tr")
 .data(ViewModel.dataPoints);
 rows.enter().append("tr");
 rows.exit().remove(); 


 let cells = rows.selectAll("td")
 .data(function(row) 
 return d3.map(row).values(); 
 )
 .enter()
 .append("td") //<-- ?

At the let cells is it possible to run a function on the .append("td") to place a svg element in the last column and run a function on that svg element constructing the visualization?

data looks like this:

dataPoints = [
 
 "Task" : "A",
 "Start": "Thu Dec 01 2011",
 "Finish": Thu Dec 01 2012"
 ,
 
 "Task" : "B",
 "Start": "Thu Dec 01 2012",
 "Finish": Thu Dec 01 2013"
 
]

Full Code:

module powerbi.extensibility.visual 

 interface DataPoint ;

 interface ViewModel 
 dataPoints: DataPoint;
 ;

 export class Visual implements IVisual 

 private host: IVisualHost;
 private svg: d3.Selection<SVGAElement>;
 private barGroup: d3.Selection<SVGAElement>;

 private divContainer: d3.Selection<HTMLDivElement>;
 private table: d3.Selection<HTMLTableElement>;
 private tbody: d3.Selection<HTMLTableRowElement>;
 private thead: d3.Selection<HTMLTableHeaderCellElement>;
 private HeadColumns = ;


 constructor(options: VisualConstructorOptions) 
 options.element.style.overflow = 'auto';

 this.host = options.host;

 this.divContainer = d3.select(options.element)
 .append("div")
 .classed("divContainer", true)
 .attr("width", "100%")
 .attr("height", "100%");

 this.table = d3.select(".divContainer")
 .append("table")
 .classed("hello", true)
 .style("background-color", "#72B6E7")
 .attr("width", "100%")
 .attr("height", "100%");

 this.thead = d3.select("table")
 .append("thead");

 this.tbody = d3.select("table")
 .append("tbody");

 

 public update(options: VisualUpdateOptions) 

 let ViewModel = this.getViewModel(options);
 let width = options.viewport.width;
 let height = options.viewport.height;

 //Creates Header Column Names
 this.thead.selectAll("th")
 .data(this.HeadColumns)
 .enter()
 .append("th")
 .text(function(d) return d; );

 //Creats Rows 
 let rows = this.tbody.selectAll("tr")
 .data(ViewModel.dataPoints)
 rows.enter().append("tr");
 rows.exit().remove(); 

 let cells = rows.selectAll("td")
 .data(function(row) 
 return d3.map(row).values(); 
 )
 .enter()
 .append("td")
 .text(function (d) 
 return d; 
 );
 

 private getViewModel(options: VisualUpdateOptions): ViewModel 

 let dv = options.dataViews;

 let viewModel: ViewModel = 
 dataPoints: ,
 ;

 let Table = dv[0].table
 let TableRows = Table.rows
 let TableLen = Table.rows.length
 let TableColumnNumber = Table.columns.length
 let TableColumns = 

 this.HeadColumns = ;

 for (let i = 0, len = TableColumnNumber; i < len; i++)
 let tmp = ;

 tmp["ColumnName"] = Table.columns[i].displayName;
 this.HeadColumns.push(Table.columns[i].displayName);

 TableColumns.push(tmp);
 

 for (let i = 0, len = TableLen; i < len; i++)
 var tmp_ = ;

 for (let k = 0, len = TableColumns.length; k < len; k++)
 tmp_[TableColumns[k].ColumnName] = <string>TableRows[i][k]; 
 

 viewModel.dataPoints.push(tmp_);
 
 return viewModel;