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

[feiyiding]

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(nodes, function (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?

[v-shex-msft]

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