d3.select not working

[ngann93]

Hi I have recently started working on power custom visualization. 

While working on .ts file looking at the examples my d3.select is not working.

What could be the poosible reason for it?

I have imported the typings for d3 and included in the file structure. But its still not working and it shows no error while i tried to run it.

  export class Visual implements IVisual {
 private target: HTMLElement;
 private barDataPoints: nodeTreeViewPoints[];
 private host: IVisualHost;
 private svg: d3.Selection<SVGElement>;
 private barContainer: d3.Selection<SVGElement>;
 private xAxis: d3.Selection<SVGElement>;
 private selectionManager: ISelectionManager;
 

 static Config = {
 xScalePadding: 0.1,
 solidOpacity: 1,
 transparentOpacity: 0.5,
 margins: {
 top: 0,
 right: 0,
 bottom: 25,
 left: 30,
 },
 xAxisFontMultiplier: 0.04,
 };

 constructor(options: VisualConstructorOptions) {
 this.host = options.host;
 this.selectionManager = options.host.createSelectionManager();
 console.log("aaaaa111");
 this.svg = d3.select(options.element);
 let svg = this.svg;
 console.log("aaaaa");
 this.barContainer = svg.append('g')
 .classed('nodeGraphArea', true);

 this.xAxis = svg.append('g')
 .classed('xAxis', true);
 }

the "aaaa " never prints on the console.

[ngann93 · Accepted solution]

Hi I have recently started working on power custom visualization. 

While working on .ts file looking at the examples my d3.select is not working.

What could be the poosible reason for it?

I have imported the typings for d3 and included in the file structure. But its still not working and it shows no error while i tried to run it.

  export class Visual implements IVisual {
 private target: HTMLElement;
 private barDataPoints: nodeTreeViewPoints[];
 private host: IVisualHost;
 private svg: d3.Selection<SVGElement>;
 private barContainer: d3.Selection<SVGElement>;
 private xAxis: d3.Selection<SVGElement>;
 private selectionManager: ISelectionManager;
 

 static Config = {
 xScalePadding: 0.1,
 solidOpacity: 1,
 transparentOpacity: 0.5,
 margins: {
 top: 0,
 right: 0,
 bottom: 25,
 left: 30,
 },
 xAxisFontMultiplier: 0.04,
 };

 constructor(options: VisualConstructorOptions) {
 this.host = options.host;
 this.selectionManager = options.host.createSelectionManager();
 console.log("aaaaa111");
 this.svg = d3.select(options.element);
 let svg = this.svg;
 console.log("aaaaa");
 this.barContainer = svg.append('g')
 .classed('nodeGraphArea', true);

 this.xAxis = svg.append('g')
 .classed('xAxis', true);
 }

the "aaaa " never prints on the console.

[v-chuncz-msft · Accepted solution]

@ngann93,

Based on my test, you could use the following script to workaround this situation.

	private window: any;

        constructor(options: VisualConstructorOptions) {
		this.window = window;

		this.svg = this.window.d3.select(options.element);

[ngann93 · Accepted solution]

Hi I have recently started working on power custom visualization. 

While working on .ts file looking at the examples my d3.select is not working.

What could be the poosible reason for it?

I have imported the typings for d3 and included in the file structure. But its still not working and it shows no error while i tried to run it.

  export class Visual implements IVisual {
 private target: HTMLElement;
 private barDataPoints: nodeTreeViewPoints[];
 private host: IVisualHost;
 private svg: d3.Selection<SVGElement>;
 private barContainer: d3.Selection<SVGElement>;
 private xAxis: d3.Selection<SVGElement>;
 private selectionManager: ISelectionManager;
 

 static Config = {
 xScalePadding: 0.1,
 solidOpacity: 1,
 transparentOpacity: 0.5,
 margins: {
 top: 0,
 right: 0,
 bottom: 25,
 left: 30,
 },
 xAxisFontMultiplier: 0.04,
 };

 constructor(options: VisualConstructorOptions) {
 this.host = options.host;
 this.selectionManager = options.host.createSelectionManager();
 console.log("aaaaa111");
 this.svg = d3.select(options.element);
 let svg = this.svg;
 console.log("aaaaa");
 this.barContainer = svg.append('g')
 .classed('nodeGraphArea', true);

 this.xAxis = svg.append('g')
 .classed('xAxis', true);
 }

the "aaaa " never prints on the console.