Hi, I'm fairly new to developing custom visuals. I've gone through a few tutorials and messed around moving simple d3 visuals to power bi, and am now trying to make a custom treemap visual based on this d3 treemap. I can make it work if I include the data directly in the visual, but I'm struggling in making sense how to structure the data from power bi into a format that can be used by d3.hierarchy then passed to d3.treemap, or used directly by d3.treemap.
I think the matrix data view mapping would be most appropriate, as it's a hierachical structure? Unfortunately, I haven't been able to find any tutorials or sample custom visuals using the matrix data view, and I find the information on the Understand data view mapping page somewhat limited.
I've posted my visual.ts code below, and would greatly appreciate any help / pointing in the direction of relevant documention/tutorials/examples!
"use strict";
import "core-js/stable";
import "./../style/visual.less";
import powerbi from "powerbi-visuals-api";
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import IVisual = powerbi.extensibility.visual.IVisual;
import EnumerateVisualObjectInstancesOptions = powerbi.EnumerateVisualObjectInstancesOptions;
import VisualObjectInstance = powerbi.VisualObjectInstance;
import DataView = powerbi.DataView;
import VisualObjectInstanceEnumerationObject = powerbi.VisualObjectInstanceEnumerationObject;
import { VisualSettings } from "./settings";
import * as d3 from 'd3';
import { values } from "d3";
import { getMeasureIndexOfRole } from "powerbi-visuals-utils-dataviewutils/lib/dataRoleHelper";
interface Finn {
children: {
name: string;
children: {
name: string;
group: string;
value: number;
colname: string;
}[];
colname: string;
}[];
name: string;
}
export class Visual implements IVisual {
private target: HTMLElement;
private settings: VisualSettings;
private container: d3.Selection<HTMLDivElement, any, HTMLDivElement, any>;
constructor(options: VisualConstructorOptions) {
console.log('Visual constructor', options);
this.target = options.element;
this.container = d3.select(this.target)
.append('div')
.attr('id', 'my_dataviz');
}
public update(options: VisualUpdateOptions) {
//console.log('Visual update', options);
//this.settings = Visual.parseSettings(options && options.dataViews && options.dataViews[0]);
// this.container.selectAll('*').remove();
//let dataViews = options.dataViews;
var margin = { top: 10, right: 30, bottom: 30, left: 60 },
width = options.viewport.width - margin.left - margin.right,
height = options.viewport.height - margin.top - margin.bottom;
var svg = this.container
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
//data
let data: Finn = {
"children": [
{
"name": "boss1",
"children": [
{
"name": "mister_a",
"group": "A",
"value": 28,
"colname": "level3"
},
{
"name": "mister_b",
"group": "A",
"value": 19,
"colname": "level3"
},
{
"name": "mister_c",
"group": "C",
"value": 18,
"colname": "level3"
},
{
"name": "mister_d",
"group": "C",
"value": 19,
"colname": "level3"
}
],
"colname": "level2"
},
{
"name": "boss2",
"children": [
{
"name": "mister_e",
"group": "C",
"value": 14,
"colname": "level3"
},
{
"name": "mister_f",
"group": "A",
"value": 11,
"colname": "level3"
},
{
"name": "mister_g",
"group": "B",
"value": 15,
"colname": "level3"
},
{
"name": "mister_h",
"group": "B",
"value": 16,
"colname": "level3"
}
],
"colname": "level2"
},
{
"name": "boss3",
"children": [
{
"name": "mister_i",
"group": "B",
"value": 10,
"colname": "level3"
},
{
"name": "mister_j",
"group": "A",
"value": 13,
"colname": "level3"
},
{
"name": "mister_k",
"group": "A",
"value": 13,
"colname": "level3"
},
{
"name": "mister_l",
"group": "D",
"value": 25,
"colname": "level3"
},
{
"name": "mister_m",
"group": "D",
"value": 16,
"colname": "level3"
},
{
"name": "mister_n",
"group": "D",
"value": 28,
"colname": "level3"
}
],
"colname": "level2"
}
],
"name": "CEO"
}
// read json data
// d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_dendrogram_full.json", function (data) {
// Give the data to this cluster layout:
var root = d3.hierarchy(data).sum(function (d) { return (<any>d).value }) // Here the size of each leave is given in the 'value' field in input data
// Then d3.treemap computes the position of each element of the hierarchy
d3.treemap()
.size([width, height])
.padding(2)
(root)
// use this information to add rectangles:
svg
.selectAll("rect")
.data(root.leaves())
.enter()
.append("rect")
.attr('x', function (d) { return (<any>d).x0; })
.attr('y', function (d) { return (<any>d).y0; })
.attr('width', function (d) { return (<any>d).x1 - (<any>d).x0; })
.attr('height', function (d) { return (<any>d).y1 - (<any>d).y0; })
.style("stroke", "black")
.style("fill", "slateblue")
// and to add the text labels
svg
.selectAll("text")
.data(root.leaves())
.enter()
.append("text")
.attr("x", function (d) { return (<any>d).x0 + 5 }) // +10 to adjust position (more right)
.attr("y", function (d) { return (<any>d).y0 + 20 }) // +20 to adjust position (lower)
.text(function (d) { return d.data.name })
.attr("font-size", "15px")
.attr("fill", "white")
}
//)
//}
private static parseSettings(dataView: DataView): VisualSettings {
return VisualSettings.parse(dataView) as VisualSettings;
}
/**
* This function gets called for each of the objects defined in the capabilities files and allows you to select which of the
* objects and properties you want to expose to the users in the property pane.
*
*/
public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstance[] | VisualObjectInstanceEnumerationObject {
return VisualSettings.enumerateObjectInstances(this.settings || VisualSettings.getDefault(), options);
}
}
