datamaps | htmlwidgets binding for the datamaps package | Data Visualization library

I have a custom bubble map on India geographical region which is done using data maps

There is html file and when i open it in browser i will get this result

Code is mentioned below

I am looking to add animation effect on the bubbles in the svg map using the datamaps in angular 8. the bubbles are displayed correctly but the animation is not working. This is what I have tried so far

I want to change the map in the datamaps to a svg image. so that I can change it to different map as needed at a later stage. Is it possible to do that or do I need to change the code in the datamap to change the map to a different map ? or is there way I can hide some of the country in the world map ?

I was attempting to modify the FormGroup validation of the FormGroup assigned to a Kendo Grid when one of the items in the dataItem is modified. The logic is that: If the selected AuthType is Basic, username and password should be 'required' by the form validation.
If the selected AuthType is QueryString, queryString should be 'required' by the form validation. If the selected AuthType is AuthorizationHeader, authorizationHeader should be 'required' by the form validation.

This issue was, after updating the FormGroup, the validation no longer seems to function properly. The old validations are still being honored, and when the selection for the AuthType is changed, the validations for the now hidden fields then prevents the form from being submitted.

He is my code: web-connections.component.ts:

I am using DataMap, unlike the normal view for a map, I turned the map upside down, When mouseover, the tooltip location doesn't correspond, to the location of the mouse when I mouseover

I have tried different codes, in other to get accurate coordinates, but none is giving me what I need.

In the map react component

I've created a world map, using DataMaps.

My aim is to asynchronously show and hide arcs on the map, based on some API data.

What have I already tried

I am calling my API every 5 seconds and push the response data into the map. (This will be replaced by asynchronous calls in the future)

In my example below, the arcData array represents my API response.

I am able to access the arcs via DOM manipulation. In my case I am using d3.selectAll('path.datamaps-arc').transition().duration(3500).style("opacity", 0); to slowly fade out all arcs and delete them afterwards.

After running the command npm run build I got the build files without any error but once when I try to run the app it's showing blank page and error as

I am unable to find where the issue is my index.html file is like

I'm trying to get a simple US map up using the DataMaps package and d3. I have tried the following:

I want that if you click to a link in Datamaps (D3), you get to a special Link, but this should be just possible, if the variable blogentries is >0 or is set.

My Code: