I'm currently working on integrating a d3 code into Power BI for creating a collapsible tree structure. Each node in the tree is represented by a rectangular box, but I've run into an issue where nodes overlap when their size is large. Below is the code snippet I'm using:
// Implementation of translate function for the data
function toJSON(data) {
// Code logic here
}
// Aggregate revenue function
function aggregateRevenue(node) {
// Code logic here
}
// Set margins and dimensions
var margin = {top: 20, right: 120, bottom: 20, left: 120},
width = pbi.width - margin.left - margin.right,
height = pbi.height - margin.top - margin.bottom;
// Various D3 configurations
var i = 0,
duration = 750,
root;
// Tree layout and diagonal projection
var tree = d3.layout.tree()
.size([height, width]);
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
// Zoom functionality configuration
var zoom = d3.behavior.zoom()
.scaleExtent([0.1, 10])
.on("zoom", zoomed);
function zoomed() {
svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
// SVG creation
var svg = d3.select("#chart")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.call(zoom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Data loading via pbi.dsv
pbi.dsv(function(data) {
// Additional logic after data load
});
// More D3 updates and transitions
I also experimented with the following treemap code to address the overlapping issue:
var treemap = d3.tree()
.size([10*height, width])
.separation(function separation(a, b) { return a.parent == b.parent ? 2 : 2; });
If you have any insights or suggestions on how to resolve the node overlap problem, I would greatly appreciate your help.