Forum Discussion

a_novice's avatar
a_novice
Frequent Visitor
9 years ago
Solved

Error: Custom Visual

Hello! When coding a custom barchart for powerbi I get an error with a d3 typing. I had errors with other d3 typings when following the microsoft instructional video on youtube, but I have figured o...
Need Help
  • v-viig's avatar
    v-viig
    9 years ago

    I suppose that you might use these code:

    private svg: d3.Selection<d3.BaseType, any, HTMLElement, any>;
private barChartContainer: d3.Selection<d3.BaseType, any, any, any>;
private barContainer: d3.Selection<d3.BaseType, any, any, any>;
private xAxis: d3.Selection<d3.BaseType, any, any, any>;
    let svg = this.svg = d3.select<SVGElement, any>(options.element as any)
    this.svg.attr({
    width: width,
    height: height
} as any);
    bars.attr({
    width: xScale.rangeBand(),
    height: d => height - yScale(<number>d.value),
    y: d => yScale(<number>d.value),
    x: d => xScale(d.category),
    fill: d => d.color,
    'fill-opacity': viewModel.settings.generalView.opacity / 100
});

    Ignat Vilesov,

    Software Engineer

     

    Microsoft Power BI Custom Visuals

    [email protected]

     

v-viig's avatar
v-viig
Community Champion
9 years ago

Hello a_novice,

 

You might use this:

d3.Selection<SVGElement, any, any, any>;

What errors do you get if you apply this type?

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

[email protected]

  • a_novice's avatar
    a_novice
    Frequent Visitor
    9 years ago

    Hello v-viig

    I get errors everytime i reference the property when I apply:

    d3.Selection<SVGElement, any, any, any>;

     

     

     

     the errors:

    'Error' message: 'Type 'Selection<BaseType, {}, null, undefined>' is not assignable to type 'Selection<SVGElement, any, any, any>'.
Type 'BaseType' is not assignable to type 'SVGElement'.
Type 'Element' is not assignable to type 'SVGElement'.
Property 'onclick' is missing in type 'Element'.'

    and:

    'Error' message: 'Argument of type '{ width: [number, number]; height: (d: any) => number; y: (d: any) => number; x: (d: any) => numb...' is not assignable to parameter of type 'string'.'

     

    • v-viig's avatar
      v-viig
      Community Champion
      9 years ago

      I suppose that you might use these code:

      private svg: d3.Selection<d3.BaseType, any, HTMLElement, any>;
private barChartContainer: d3.Selection<d3.BaseType, any, any, any>;
private barContainer: d3.Selection<d3.BaseType, any, any, any>;
private xAxis: d3.Selection<d3.BaseType, any, any, any>;
      let svg = this.svg = d3.select<SVGElement, any>(options.element as any)
      this.svg.attr({
    width: width,
    height: height
} as any);
      bars.attr({
    width: xScale.rangeBand(),
    height: d => height - yScale(<number>d.value),
    y: d => yScale(<number>d.value),
    x: d => xScale(d.category),
    fill: d => d.color,
    'fill-opacity': viewModel.settings.generalView.opacity / 100
});

      Ignat Vilesov,

      Software Engineer

       

      Microsoft Power BI Custom Visuals

      [email protected]

       

      • a_novice's avatar
        a_novice
        Frequent Visitor
        9 years ago

        thank you v-viig! this works great except for:

        bars.attr({
    width: xScale.rangeBand(),
    height: d => height - yScale(<number>d.value),
    y: d => yScale(<number>d.value),
    x: d => xScale(d.category),
    fill: d => d.color,
    'fill-opacity': viewModel.settings.generalView.opacity / 100
});

        since I'm using d3 v4 I cannot use .rangeBand doesn't work. I tried changing it to v4 format, but I am still getting the same error:

        'Error' message: 'Argument of type '{ width: number; height: (d: any) => number; y: (d: any) => number; x: (d: any) => number; fill: ...' is not assignable to parameter of type 'string'.'

        I am also having issues with the 'fill-opacity'. my code:

                public update(options: VisualUpdateOptions) {
            let width = options.viewport.width;
            let height = options.viewport.height;
            let margin = { top: 0, bottom: 25, let: 0, right: 0 };

            let viewModel: BarChartViewModel = this.vm =visualTransform(options, this.host)

            this.svg.attr({
                width: width,
                height: height
            } as any);

            if(viewModel.settings.enableAxis.show)
                height -= margin.bottom;

            let yScale = d3.scaleLinear()
                .domain([0, viewModel.dataMax])
                .range([height, 0]);

            let xScale = d3.scaleBand()
                .domain(viewModel.dataPoints.map(d => d.category))
                .rangeRound([0, width]);

            let xAxis = d3.axisBottom(xScale);

            this.xAxis.attr('transform', 'translate(0' + height + ')')
                .call(xAxis);

            let bars = this.barContainer.selectAll('.bar').data(viewModel.dataPoints);

            bars.enter()
                .append('rect')
                .classed('bar', true)

            bars.attr({
                width: xScale.bandwidth(),
                height: d => height - yScale(<number>d.value),
                y: d => yScale(<number>d.value),
                x: d => xScale(d.category),
                fill: d => d.color,
                'fill-opacity': viewModel.settings.generalView.opacity / 100

            });

            let selectionManager = this.selectionManager

            bars.on('click', function (d) {
                selectionManager.select(d.selectionId).then((ids: ISelectionId[]) => {
                    bars.attr({
                        'fill-opacity': ids.length > 0 ? 0.5 : 1
                    });

                    d3.select(this).attr({
                        'fill-opacity': 1
                    });
                });

                (<Event>d3.event).stopPropagation();
            })

            bars.exit()
                .remove();
        }