topic Re: How to ensure latest version of d3 in Custom Visuals Development Discussion

How to ensure latest version of d3

smpa01 — Wed, 14 Sep 2022 19:10:08 GMT

I am currently trying to build a Power BI custom viz.

I have followed the steps listed here . While installing d3 from npm , on the terminal I used

npm i d3 --save

instead of doing it this way

npm i d3@^5.0.0 --save

as instructed here

However, I see this within `package-lock.json` file -

"version": "5.12.0",

I am not sure what it means. But I want to make sure that all my custom viz uses d3 v7. Cause the HTML I have created are all using d3 v7.

Is there any way for me to ensure that while building, pbiviz always includes the latest version of d3(assuming it is not doing that currently, I can be completely wrong)?

Thank you in advance.

Re: How to ensure latest version of d3

shannnonpereira — Thu, 15 Sep 2022 10:10:48 GMT

@smpa01 I am not completely sure, but I think the current framework supports only up to d3 v5. The steps in the official documentation also mention installing d3 v5.

You can try getting in touch with the custom visual team via email to verify this. They are always responsive and super helpful!

pbicvsupport@microsoft.com

Re: How to ensure latest version of d3

smpa01 — Thu, 15 Sep 2022 13:30:28 GMT

@shannnonpereira I really don't think that is the case.

d3V7 was utilized here

Screenshot from the above link

@v-viig @dm-p can you please help.

I still see this in package.json

Re: How to ensure latest version of d3

dm-p — Thu, 15 Sep 2022 22:20:01 GMT

If you want to automatically upgrade your packages, you'll probably need to set up some kind of npm script to do this, however, this goes against the point of why your package.json and package-lock.json are there. These are to ensure that you package and build your visual with the versions of the libraries you intend to use, that you can guarantee stability between updates of your visual, and that you can upgrade these when you are ready to do so. I personally rely on this mechanism, so it's not something I'd been keen to explore, as I want to test any major package updates before I apply them to a production build of my visual.

For instance, if you arbitrarily upgrade your packages from D3 v5 to v7 just because you want to, there are a whole bunch of changes that get introduced and some of them are breaking changes. You would need to isolate these in your code and fix up, and can hinder the build process. There are whole articles out there dedicated to migrating your codebase from one version of D3 to the next. I'd personally only update a package if there are features I need, and I can accept the costs of refactoring my code to suit or a security update necessitates it.

If you're sure that your visuals that use D3 v5 have no breaking changes you could just run npm i d3@latest in your project's root folder, or manually update the entry in your package.json to the version you want, save the file and run npm i to update everything.

If you want more rounded advice, then this might be a better question to post in a community dedicated to node.js and JavaScript, as this is more of an architecture issue than a Power BI visuals issue. Similarly, this article may help you with finding the right semantic versioning to use for any such packages to ensure that they stay up to date (at least for minor and service releases).

Regards,

Daniel

Re: How to ensure latest version of d3

smpa01 — Fri, 16 Sep 2022 01:06:33 GMT

Hello @dm-p

Thank you very much for the response. There are few things I need to clarify here.

I have not yet built a single power bi custom visual using powerbi-visuals-tools . But I want to as I have gotten somewhat comfortable with d3.js and built visuals exactly as any other d3 aspirant

would do by creating doc.html+index.js+style.css files in VS Studio Code. Now that I have built some visuals using d3 which once used to be my imagination, I want to see how can I utilize powerbi-visuals-tools to convert them into a custom viz. All my d3 visuals (doc.html+style.css+index.js) were developed using d3v7.

As a first step, to build power bi custom viz I downloaded powerbi-visuals-tools and my expectation was that it would return package.json with d3v7. I can also see that this person here got d3v7 with powerbi-visuals-tools. Which is why I am trying to understand why powerbi-visuals-tools does not return a package.json that has the latest version of d3 (which is v7 in this case). I see this and I am guessing it means the project will be utilizing d3's 5.16.0 version. In my case, the .html I wrote in VS studio code utilizes d3v7's d3.event which was completely different in d3v5.

So I guess, the wording in my question was wrong. I don't always want to ensure the latest version of d3, rather I want to ensure using the same version of d3 as my doc.html is currently using.

My question is how do I do that? You have already provided me with two options as below

run npm i d3@latest in your project's root folder, or manually update the entry in your package.json to the version you want, save the file and run npm i to update everything

If I do any of the above and it brings d3v7 are there any chances that any other parts of the custViz folder will break due to this update? I don't have any prior experience with npm, hence, I have so much confusion and questions. I am still in the preliminary stage of building and I don't want to go deep without knowing these components first only to discover myself in tangling trouble later.

Also, if I update to d3v7, should I not be expecting package.json to reflect that version number?

Re: How to ensure latest version of d3

dm-p — Fri, 16 Sep 2022 01:08:04 GMT

Even though D3 is present in the package.json, the default template doesn't actually use D3 for anything (it just has some simple vanilla JS DOM work for the simple message and update count that is in there to confirm that everything's working. None of the custom visual-specific assets or the webpack configuration have any dependencies on D3 either. If you didn't need it, you could remove it completely and things would still work.

powerbi-visuals-tools has templates for the pbiviz command, and the default package.json includes d3 v5. Presumably, MS just haven't kept this up to date.

Regards,

Daniel