Change view of visual when a selection has been made.

[Phil_Seamark]

I would like to create a basic custom visual for a very specific report.

The basic visual should be the box on the left showing numbers 1 through 9 in a matrix format.  These numbers will be connected to an underlying physical datatable that only has 1 column and has 9 rows with values 1 through 9.

What I would like to understand is if it is possible to easily change the visual to look like the box on the right, when the user makes a selection.  eg. if the user clicks the number 7 in the bottom right of the left-hand box to select it, I would like the visual to appear like the box on the right.  Then if the user clicks on the large 7, it unselects the object and the visual returns to it's original state.

[v-viig]

It looks like a pretty easy feature. Everything you need to do is to keep current selection state and remove/hide other numbers.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[Phil_Seamark]

Hi @v-viig

I'm actually putting this together for a blog I am writing.  The primary focus of the blog will be about DAX, but because I will be creating a custom visual, I will be sharing the code for it.  Any chance you might be keen to cast your eye over the code once I've written it so that anyone who uses the custom visual code is getting something that is helpful?

Cheers,

Phil

[Phil_Seamark]

Further to this, I'm having trouble getting the svg elements to render using the debug custom visual.  

I can see the elements in the DOM when I browse using F12 (in Edge & Chrome), but just get a blank screen. 

[v-viig]

Sure. We're happy to review the code when it's ready.

Have you applied fill or stroke to svg elements? What kind of SVG elements you use?

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[Phil_Seamark]

At this stage I'm just trying to draw any SVG element to the canvas (circle, rect or text).

Even taking a copy of the barchart sample doesn't work.  I can see the SVG elements using F12, and that the d3 javascript has loaded but it's a blank white canvas

There seem to be quite a variety of suggestions on how to set the environment up in terms of what commands and switches to run.  

I'll start again from scratch tonight and use a clean Windows 10 Azure VM.  Do you have a current list of how to configure a clean environment from scratch and can I email you directly?  I will be using this in a number of presentations so will be sharing the knowledge widely. 

[v-viig]

We'd recommend to follow official documentation that describe how to isntall and work with pbiviz tools.

If you have any issues feel free to email us.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[Phil_Seamark]

Hi again,

I'm repeating the environment setup on a clean Azure Windows 10 VM.

I have some questions about the https://github.com/Microsoft/PowerBI-visuals/blob/master/Tutorial/ExternalLibraries.md page

The link I have highlighted with text of "this" goes to a 404 page.  Is this important?

Then, once I have run 

npm install d3@4.9.1 --save

I don't have the "node_modules/d3/d3.min.js" in the "node_mindules/d3" folder.  There is one in a sub folder called build.  This this the correct file to use?

[Phil_Seamark]

Further to this, now I am set up with a clean environment (following the install instructions closely) and I still can't draw a d3 object to the canvas.

Here is my code which based on the started "Update Count" visual that works.

I'm just trying to see if I can draw a simply D3 graphic to the page.  I wonder if I'm creating the svg object ok, and adding a g and rect object to it, but missing the correct command to add it to the DOM.  

module powerbi.extensibility.visual {
    "use strict";
    export class Visual implements IVisual {
        private target: HTMLElement;
        private updateCount: number;
        private settings: VisualSettings;
        private textNode: Text;

        private svg: d3.Selection<SVGElement>;
        private g: d3.Selection<SVGElement>;
        private myrect: d3.Selection<SVGElement>;

        constructor(options: VisualConstructorOptions) {
            console.log('Visual constructor', options);
            this.target = options.element;
            this.updateCount = 0;
            if (typeof document !== "undefined") {
                const new_p: HTMLElement = document.createElement("p");
                new_p.appendChild(document.createTextNode("Update -- count:"));
                const new_em: HTMLElement = document.createElement("em");
                this.textNode = document.createTextNode(this.updateCount.toString());
                new_em.appendChild(this.textNode);
                new_p.appendChild(new_em);
                this.target.appendChild(new_p);
            }

            this.svg = d3.select(options.element).append('svg');
            this.g = this.svg.append('g');
            this.myrect = this.g.append('rect');
            this.myrect.attr("x", 10);
            this.myrect.attr("y", 10);
            this.myrect.attr("height", 50);
            this.myrect.attr("width", 50);
            this.myrect.attr("fill", "red");
            
        }

[Phil_Seamark]

I've narrowed it down to the following line

this.svg = d3.select(options.element).append('svg');

As soon as the js hits this line it complains that d3 is an unknown object.   

[Phil_Seamark]

Found the issue. I was following the documentatoin when it suggests to install version 4.9.1 of D3.  The way this javascript is written is not 100% compatible with the custom visual

So instead of this

npm install d3@4.9.1 --save

I ran

npm install d3@3.5.6 --save

Which replaced my d3 files and folders and everything started to work.

If I set client breakpoints at the contstructor of the custom visual, the d3 object did not exist when using 4.9.1.  But when using ver 3.5.6, the d3 object had been instantiated and worked like a treat.  Now I can get on with building my actual visual 😄

[v-viig]

Happy to see that you resolved the issue.

If you use d3 v4 and greater you have to access d3 in this way:

window["d3"]

This is required as d3 object goes to cloned window object instead of real window.

We're aware about this issue and working on solution.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[Phil_Seamark]

Additional info shows the F12 view of the custom visual debug window:

This shows that one of the scripts referenced in the PBI

This shows one of the external JS scripts referenced in pbiviz.json has loaded but not the d3.min.js file.

[Phil_Seamark]

It looks like the d3.min.js script is loading, but if I put a breakpoint in my code and test for the d3 object I get "d3 object is not defined"

What worries me is there is a discrepancy between the official documentation expecting the d3 js to be in a different folder.  I wonder if some initiation code somewhere that is missing.