Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Earn the coveted Fabric Analytics Engineer certification. 100% off your exam for a limited time only!

Reply
ngann93
Frequent Visitor

d3.select not working

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.

 

 

2 ACCEPTED SOLUTIONS
ngann93
Frequent Visitor

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.

View solution in original post

v-chuncz-msft
Community Support
Community Support

@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);

 

Community Support Team _ Sam Zha
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

View solution in original post

2 REPLIES 2
v-chuncz-msft
Community Support
Community Support

@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);

 

Community Support Team _ Sam Zha
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
ngann93
Frequent Visitor

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.

Helpful resources

Announcements
April AMA free

Microsoft Fabric AMA Livestream

Join us Tuesday, April 09, 9:00 – 10:00 AM PST for a live, expert-led Q&A session on all things Microsoft Fabric!

March Fabric Community Update

Fabric Community Update - March 2024

Find out what's new and trending in the Fabric Community.

Top Solution Authors
Top Kudoed Authors