Auto update custom vizualization

[filipwydra]

Hello,

I develop custom Gantt Chart for Power BI using TS and D3.js. I'm facing a problem with re-rendering my visual once I add or modify fields which are meaures. In this case only "Phases" are measures.

When I add a new field to Pahses, it only reloads the number of project bars that are non-null. So if, for example, we have 10 lines / 10 projects and we add "Phases", 4 of which are null, only the first 6 lines will be refreshed so that in the remaining 4 milestons will be under the squares. 

When I reload the visualization manually it works fine. But I want to be updated automatically.

This is how it looks like when crashed: 

My "dataroles" and "dataViewMappings" looks like that:

       "dataRoles": [
        {
            "displayName": "Project Name",
            "name": "yAxis",
            "kind": "Grouping"
        },
        {
            "displayName": "Type Name",
            "name": "typeName",
            "kind": "Grouping"
        },
        {
            "displayName": "Phases",
            "name": "segments",
            "kind": "Measure"
        },
        {
            "displayName": "Milestones - Major",
            "name": "milestonesG1",
            "kind": "Grouping"
            
        },
        {
            "displayName": "Milestones - Regions",
            "name": "milestonesG2",
            "kind": "Grouping"
        },
        {
            "displayName": "Milestones - Market",
            "name": "milestonesG3",
            "kind": "Grouping"
        },
        {
            "displayName": "Business Case Status",
            "name": "businessCaseStatus",
            "kind": "Grouping"
        },
        {
            "displayName": "Images",
            "name": "images",
            "kind": "Grouping"
        }

    ],

 "dataViewMappings": [
        {
            "conditions": [
                {
                    "yAxis": {
                        "max": 1
                    },
                    "typeName": {
                        "max": 1
                    },
                    "businessCaseStatus": {
                        "min": 0,
                        "max": 1
                    },
                    "images": {
                        "min": 0,
                        "max": 1
                    },
                    "segments": {
                        "min": 0,
                        "max": 20
                    }
                }
            ],
            "categorical": {
                "categories": {
                    "select": [
                        { "bind": { "to": "yAxis" } },
                        { "bind": { "to": "typeName" } },
                        { "bind": { "to": "milestonesG1" } },
                        { "bind": { "to": "milestonesG2" } },
                        { "bind": { "to": "milestonesG3" } },
                        { "bind": { "to": "businessCaseStatus" } },
                        { "bind": { "to": "images" } }
                    ]
                },
                "values": {
                    "group": {
                        "by": "typeName",
                        "select": [
                            { "bind": { "to": "segments" } }
                        ]
                    }
                }
            }
        }
    ]

Did you ever face that problem ? Do you have any solution for that ?

Thanks for all answears and ideas !

[UPDATE]

It's worth to clear the D3 visual when update. To do this use this line of code:

d3.selectAll("svg > *").remove();

[filipwydra]

Daniel,

Thank you so much for the tips ! 

As you mentioned the problem doesn't come from Power BI implementation but it comes from D3.js. I created three data transformations and milestones are using different dataset than rectangles. I will have to change it and make only one dataset. 

Thanks again!

Best regards,

Filip

[v-shex-msft]

Hi @filipwydra,

Did dm-p's suggestions help with your scenario? if that is the case, you can consider Kudo or accept this suggestion to help others who faced similar requirements.

If these also don't help, please share more detailed information to help us clarify your scenario to test.

How to Get Your Question Answered Quickly 

Regards,

Xiaoxin Sheng

[dm-p · Accepted solution]

Hi @filipwydra,

Thanks for provising your capabilities, but this very much sounds like a common misstep when setting up a D3 visual. Most examples work with a static data set, so don't manage events where the data may change, which is common need with Power BI visuals (as you're experiencing). As I haven't seen your code, I can only assume it's the same, but I'd recommend checking the detail below first.

If the visual only adds elements for additional data, or works when you refresh, it sounds like you aren't handling data joins with D3 correctly. It sounds like you might just be using .enter() to create your elements? If so you should consider adding handlers for .update() and .exit() so that D3 will re-bind data for already drawn elements and ensure that if elements are not required (e.g. less data in an update) then they are removed from the DOM. By refreshing the visual completely, this is sen by D3 as a new set of data and will only handle .enter() events, which is why it re-draws successfully.

If you haven't seen it, this article is really good for explaining the concepts, with simple demos. There is a section dedicated to handling updates to the data as well, and what is needed for updating the DOM. I also have a custom visual for the purposes of teaching the SDK that you can look at and cross-check for an example how I'm managing these events, which may give you some ideas (point where joins are introduced | joins in finished visual).

If you're sure that you've wired this up correctly, then it is possible that there may be an issue with how you're binding your data to your viewmodel for updates, but we'd need to see your code to assist further with that (although I'm confident it's the data join issue).

Good luck,

Daniel