Hi v-viig,
Thank you for your answer. What I am trying to do is rendering Dagre Graph with D3 (actually Dagre-D3). Inside of Javascript I have no problems with rendering at all. I tried it with D3.V3 but it does not render my graph and I do not get any errros. So I thought I would give it a try in D3.V4. I have following dependencies in my pbiviz.json:
"externalJS": [
"node_modules/powerbi-visuals-utils-dataviewutils/lib/index.js",
"node_modules/d3/build/d3.min.js",
"node_modules/graphlib/dist/graphlib.core.js",
"node_modules/dagre/dist/dagre.core.js",
"node_modules/dagre-d3/dist/dagre-d3.min.js"
],I did npm install and @types install for all the files (newest version). My visuals.ts looks as follows:
/*
* Power BI Visual CLI
*
* Copyright (c) Microsoft Corporation
* All rights reserved.
* MIT License
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the ""Software""), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
module powerbi.extensibility.visual {
"use strict";
export class Visual implements IVisual {
private target: HTMLElement;
private updateCount: number;
private settings: VisualSettings;
private textNode: Text;
private svg: d3.Selection<d3.BaseType, any, HTMLElement, any>;
constructor(options: VisualConstructorOptions) {
console.log('Visual constructor', options);
this.target = options.element;
this.svg = d3.select<SVGElement, any>(options.element as any)
.append('svg')
.classed('graph', true);
}
public update(options: VisualUpdateOptions) {
this.settings = Visual.parseSettings(options && options.dataViews && options.dataViews[0]);
// Set up an SVG group so that we can translate the final graph.
let svg = d3.select("svg");
let inner = svg.append("g");
// Create a new directed graph
var g = new dagreD3.graphlib.Graph();
g.setGraph({});
// Fill node "A" with the color green
g.setNode("A", { style: "fill: #afa" });
// Create the renderer
var render = new dagreD3.render();
// Run the renderer. This is what draws the final graph.
render(inner, g);
}
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);
}
}
}The error message that I get: [ts]
Das Argument vom Typ "Render" kann dem Parameter vom Typ "(selection: Selection<BaseType, {}, HTMLElement, any>, ...args: any[]) => void" nicht zugewiesen werden.
Die Typen der Parameter "selection" und "selection" sind nicht kompatibel.
Der Typ "Selection<BaseType, {}, HTMLElement, any>" kann dem Typ "Selection<any>" nicht zugewiesen werden.
Die Eigenschaft "length" fehlt im Typ "Selection<BaseType, {}, HTMLElement, any>".
So it should some kind of length parameter haben. But I do not see where should it come from.
Can you help me further with that ? I could send you the whole package but the forum does not seem to be the right place.
Best regargs,
feelfine
