Nrthugu

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;

        }

    }

}