cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
feiyiding
Frequent Visitor

Where and how to put the button to enable interactivity for my custom tree visual?

I'm working on building a custom tree visual using d3.js. I have finished the tree now and I want to move on to enable the interactivity so that I can use my custom visual to slice other visuals. So, for my tree, I have a lot of nodes and I want to add a button to each node for doing the slicer thing I want. Here is my node:

            var node = svg.selectAll('g.node')
                .data(nodesfunction (d) { return d["id"] || (d["id"] = ++i); });
 
            var nodeEnter = node.enter().append('g')
                .attr('class''node')
                .attr("transform"function (d) {
                    return "translate(" + source.y0 + "," + source.x0 + ")";
                })
                .on('click'click);
 
         function click(d) {
            if (d.children) {
                d["_children"] = d.children;
                d.children = null;
            } else {
                d.children = d["_children"];
                d["_children"] = null;
            }
            if (d.parent) {
                d.parent.children.forEach(function (element) {
                    if (d !== element) {
                        collapse(element);
                    }
                });
            }
            updateTree(d);
        }

PS: I'm using table DataViewMapping. 

Can someone please help me with this?

1 REPLY 1
v-shex-msft
Community Support
Community Support

Hi @feiyiding,

I don't think you can simply achieve these effects. It means you need to cache each node with two different types of records(filtered and unfiltered ), and it should be responded if these actions are activated.

In addition, you also need to consider the conflict and effects between the filtered and unfiltered records about different node interactions. (this is the hard part)
Regards,

Xiaoxin sheng

Community Support Team _ Xiaoxin
If this post helps, please consider accept as solution to help other members find it more quickly.

Helpful resources

Announcements
Power BI October Update 2021.jpg

Power BI Release

Click here to read more about the October 2021 Release!

Microsoft Ignite 768x460.png

Find your focus

Explore the latest tools,training sessions,technical expertise, networking and more.

Power BI Womens Summit 2021 768 x460.jpg

Interviews, learning sessions, allies, and more!

#PowerBIWomenSummit

Teds Dev Camp Oct. 2021 768x460.jpg

Power BI Dev Camp - October 28th, 2021

Mark your calendars and join us for our next Power BI Dev Camp!

Top Solution Authors
Top Kudoed Authors