Forum Discussion

ngann93's avatar
ngann93
Frequent Visitor
9 years ago
Solved

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.

 

 

  • 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,

     

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

     

2 Replies

  • ngann93's avatar
    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.

  • v-chuncz-msft's avatar
    v-chuncz-msft
    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);