Showing results for 
Search instead for 
Did you mean: 
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("transform"function (d) {
                    return "translate(" + source.y0 + "," + source.x0 + ")";
         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) {

PS: I'm using table DataViewMapping. 

Can someone please help me with this?

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)

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

PBI_User Group Leader_768x460.jpg

Manage your user group events

Check out the News & Announcements to learn more.

Welcome Super Users.jpg

Super User Season 2

Congratulations, the new Super User Season 2 for 2021 has started!

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

Top Solution Authors