Power BI is turning 10! Tune in for a special live episode on July 24 with behind-the-scenes stories, product evolution highlights, and a sneak peek at what’s in store for the future.
Save the dateEnhance your career with this limited time 50% discount on Fabric and Power BI exams. Ends August 31st. Request your voucher.
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.
Solved! Go to 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.
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);
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);
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.
Check out the July 2025 Power BI update to learn about new features.
This is your chance to engage directly with the engineering team behind Fabric and Power BI. Share your experiences and shape the future.
User | Count |
---|---|
10 | |
7 | |
6 | |
6 | |
6 |