Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.
Hello 🙂
I was trying to assign Selection Ids to each data point and got an error message that says:
(168,19) Cannot find name 'host'.
I marked line 168 below in red. By the way i was using this Tutorial
Did i forgot something?
Here is my full code:
module powerbi.extensibility.visual { /** * Interface for BarChart data points. * * @interface * @property {number} value - Data value for point. * @property {string} category - Corresponding category of data value. * @property {string} color - Color corresponding to data point. * @property {ISelectionId} selectionId - Id assigned to data point for cross filtering * and visual interaction. */ // Eingabevariablen-Deklaration (mit Datentyp) export interface items { counter: number; totalValue: string; selectionId: ISelectionId; } // Visual-Klasse (erbt Superklasse IVisual) export class Visual implements IVisual { private host: IVisualHost; private selectionManager: ISelectionManager; private svg: d3.Selection<SVGElement>; // SVG-Element (Container) Deklaration private g: d3.Selection<SVGElement>; // SVG-Element (group "g") Deklaration private margin = {top: 20, right: 20, bottom: 30, left: 40}; // Definiert Ränder innerhalb der Sandbox (oben,rechts,unten,links) // Konstruktor dient der Auflösung von Objekten anhand der Klasse "Visual" constructor(options: VisualConstructorOptions) { // Initialisiere svg-Grafiken; Wende Datenpunkte als SVG-Elemente an und diese als group "g" this.svg = d3.select(options.element).append('svg'); // SVG-Element (Container) this.g = this.svg.append('g'); // Die SVG-Grafik soll gruppiert, also wie ein einzelnes Bild dargestellt/behandelt werden (append("g")) this.host = options.host; this.selectionManager = options.host.createSelectionManager(); } // Die "Main-Methode", hier finden Objekt-Instanziierungen, Festsetzen von Attribut-Eigenschaften, Erzeugung von SVG-Grafiken etc. statt public update(options: VisualUpdateOptions) { // Spricht das jeweilige Objekt (Datenpunkt) an var _this = this; // Höhen- und Breitenattribute des SVG-Containers _this.svg .attr({ height: options.viewport.height, width: options.viewport.width }); // Definiert Breite des Visuals innerhalb der Sandbox (Ränder werden abgezogen) var gHeight = options.viewport.height - _this.margin.top - _this.margin.bottom; // Definiert Höhe des Visuals innerhalb der Sandbox (Ränder werden abgezogen) var gWidth = options.viewport.width - _this.margin.right - _this.margin.left; // Festsetzen von Höhen- und Breitenattributen der SVG-Grafik _this.g .attr({height: gHeight, width: gWidth}) .attr('transform','translate(' + _this.margin.left + ',' + _this.margin.top + ')'); // Definiert Koordinatensystem ausgehend von oben links mit Einbezug der Ränder // Ruft Konstruktor auf, erzeugt Objekte ("dat") und konvertiert das Datenformat anhand der "converter"-Methode var dat = Visual.converter(options.dataViews["0"].table.rows); // Skalenbreite x-Achse var x = d3.scale.linear() .range([ 0, gWidth ]) // Definiert die numerische Skalenbreite der x-Achse (vom Ausgangspunkt bis zur Visual-Länge) .domain([d3.min(dat, function(d) { return parseInt(d.totalValue); }), d3.max(dat, function(d) { return parseInt(d.totalValue); })]); // Trägt jeden Wert für die x-Achse ein // Skalenhöhe y-Achse var y = d3.scale.linear() .range([ gHeight, 0 ]) // Definiert die numerische Skalenhöhe der y-Achse (von der maximalen Höhe bis zum Ausgangspunkt) .domain([0, d3.max(dat, function (d) { return d.counter })]); // Trägt jeden Wert für die y-Achse ein // Entferne bereits existierende Achsen und Elemente _this.svg.selectAll('.axis').remove(); _this.svg.selectAll('.bar').remove(); // Erzeugt eine SVG-Grafik (x-Achse) var xAxis = d3.svg.axis() _this.g .append('g') .attr("class", "x axis") .attr("transform", "translate(0," + gHeight + ")") // Definiert das Koordinatensystem von 0 bis maximale Höhe .call(d3.svg.axis().scale(x).orient("bottom")); // Zeichnet anhand der Breite der Variable x eine horizontale nach unten ausgerichtete Linie // Erzeugt eine SVG-Grafik (y-Achse) var yAxis = d3.svg.axis() _this.g .append('g') .attr("class", "y axis") .call(d3.svg.axis().scale(y).orient("left")); // Zeichnet anhand der Höhe der Variable y eine vertikale nach links ausgerichtete Linie // Erzeugt eine SVG-Grafik mit Datenpunktelementen var shapes = _this.g .append('g') .selectAll('.bar') // Da hier nur ".bar", kann es für beliebige Punkte Elemente einfügen (anders wie bei "rect.bar" -> Platz wird reserviert) .data(dat); // Nimmt die Objekte/Elemente, welche existieren auf shapes.enter() // Kombiniert die leeren Felder aus ".selectAll" mit ".data" und erstellt ein Set aus Elementen, auf diese man einzeln zugreifen kann .append('circle') // Definiert den Visualisierungstyp .attr("r", 5) // Definiert den Radius .attr('class', 'bar') // Klasse "bar" .attr('fill', 'green') // Koloriert die Elemente mit einem vorgegebenen Farbcode .attr('stroke', 'black') // Setzt Rahmen für jedes Element des Visualisierungtyps .attr('cx', function (d) {return x(parseInt(d.totalValue));}) // Trennt die Elemente voneinander auf horizonteler Ebene .attr('cy', function (d) {return y(d.counter);}); // Trennt die Elemente voneinander auf vertikaler Ebene shapes .exit() .remove(); } public destroy(): void { //TODO: Perform any cleanup tasks here } // Konvertiert Daten wie folgt: ["Japan",100],["America",300], ... --> [{"Country" : "Japan", "Cost" : 100},{"Country" : "America", "Cost" : 300}, ... ] public static converter(rows: DataViewTableRow): items[] { var resultData: items[] = []; for (var i = 0; i < rows.length; i++) { var row = rows[i]; resultData.push({ totalValue: row[0], counter: row[1], selectionId: host.createSelectionIdBuilder() .withCategory(row[0], i) .createSelectionId() }); } return resultData; } } }
I would be very thankful for any help.
Solved! Go to Solution.
The static converter method must accept a host object as an argument:
public static converter(rows: DataViewTableRow, host): items[] {
var dat = Visual.converter(options.dataViews["0"].table.rows, this.host);
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
If convenient, share a complete project for a quick test. You may take a good look at Sample Bar Chart Repo.
The static converter method must accept a host object as an argument:
public static converter(rows: DataViewTableRow, host): items[] {
var dat = Visual.converter(options.dataViews["0"].table.rows, this.host);
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City
Check out the April 2024 Power BI update to learn about new features.
User | Count |
---|---|
15 | |
1 | |
1 | |
1 | |
1 |