Showing results for 
Search instead for 
Did you mean: 
New Member

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.

MBAS on Demand

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

Get Ready for Power BI Dev Camp

Microsoft named a Leader in The Forrester Wave

Microsoft received the highest score of any vendor in both the strategy and current offering categories.

R2 (Green) 768 x 460px.png

Microsoft Dynamics 365 & Power Platform User Professionals

DynamicsCon is a FREE, 4 half-day virtual learning experience for 11,000+ Microsoft Business Application users and professionals.