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.
