PowerBI 自定义组件推荐用D3JS 实现，实现一个PowerBI 的力导图组件，为调试方便，先用Vue 实现一个，然后再移植到PowerBI 中，话不多说，上效果：

体验入口

上代码是最好的老师：

<template>
<div><div id="force-container"></div>
</div></template><script>
import { defineComponent } from 'vue';
import * as d3 from "d3";
var color=d3.schemeCategory10;var nodes = [{"name":"爱情公寓"},{"name":"曾小贤"},{"name":"胡一菲"},{"name":"吕子乔"},{"name":"陈美嘉"},{"name":"关谷神奇"},{"name":"唐悠悠"},{"name":"陆展博"},{"name":"林宛瑜"},{"name":"张伟"},{"name":"诸葛大力"},{"name":"秦羽墨"},{"name":"诺澜"},{"name":"Lisa榕"},{"name":"杜俊"},{"name":"赵海棠"},{"name":"咖喱酱"}];
var links = [{"source":1,"target":0,"relation":"租户"},{"source":2,"target":0,"relation":"租户"},{"source":3,"target":0,"relation":"租户"},{"source":4,"target":0,"relation":"租户"},{"source":5,"target":0,"relation":"租户"},{"source":6,"target":0,"relation":"租户"},{"source":7,"target":0,"relation":"租户"},{"source":8,"target":0,"relation":"租户"},{"source":9,"target":0,"relation":"租户"},{"source":10,"target":0,"relation":"租户"},{"source":11,"target":0,"relation":"租户"},{"source":15,"target":0,"relation":"租户"},{"source":16,"target":0,"relation":"租户"},{"source":1,"target":2,"relation":"夫妻"},{"source":1,"target":13,"relation":"上下级"},{"source":1,"target":12,"relation":"同事&喜欢"},{"source":2,"target":7,"relation":"姐弟"},{"source":2,"target":11,"relation":"同学"},{"source":2,"target":12,"relation":"情敌"},{"source":3,"target":4,"relation":"夫妻"},{"source":3,"target":6,"relation":"小姨妈/大外甥"},{"source":3,"target":13,"relation":"暗恋"},{"source":4,"target":6,"relation":"闺蜜"},{"source":5,"target":6,"relation":"夫妻"},{"source":5,"target":14,"relation":"师兄弟"},{"source":7,"target":8,"relation":"情侣"},{"source":9,"target":10,"relation":"情侣"},{"source":9,"target":15,"relation":"情敌"},{"source":9,"target":16,"relation":"助理"},{"source":10,"target":15,"relation":"同学"},{"source":10,"target":2,"relation":"师生"},{"source":15,"target":10,"relation":"追求"},{"source":15,"target":2,"relation":"师生"},{"source":13,"target":12,"relation":"同学"}];export default defineComponent({mounted() {      this.drawBarChart(nodes,links);      },methods:{drawBarChart(nodes,links){var w=window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;var h=window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;w=w*0.98;h=h*0.9;var svg=d3.select("#force-container").append("svg").attr("width",w).attr("height",h*1.1);var forceSimulation = d3.forceSimulation().force("link",d3.forceLink()).force("charge",d3.forceManyBody().strength(-600))//.force("collide", d3.forceCollide(100).strength(0.2).iterations(5)).force("center",d3.forceCenter(w/2,h/2));forceSimulation.nodes(nodes).on("tick");forceSimulation.force("link").links(links).distance(200);var link=svg.selectAll(".link").data(links).enter().append("line").attr("class","link").style("stroke-width",2).style("stroke",(d,i)=>color[i%10]).style("opacity",0.6);var node=svg.selectAll(".node").data(nodes).enter().append("circle").attr("r",20).style("fill",(d,i)=>color[i%10]).call(drag()); forceSimulation.on("tick",()=>{link.attr("x1",d=>d.source.x).attr("y1",d=>d.source.y).attr("x2",d=>d.target.x).attr("y2",d=>d.target.y);node.attr("cx",d=>d.x).attr("cy",d=>d.y);edges_text.attr("x",d=>(d.source.x + d.target.x) / 2 ).attr("y",d=>(d.source.y + d.target.y) / 2 );texts.attr("x",d=>d.x).attr("y",d=>d.y);});function drag(){function dragstarted(event,d){if(!event.active)   forceSimulation.alphaTarget(0.3).restart();d.fx=d.x;d.fy=d.y;}function dragged(event,d){d.fx=event.x;d.fy=event.y;}function dragended(event,d){if(!event.active)   forceSimulation.alphaTarget(0);d.fx=null;d.fy=null;}return d3.drag().on("start",dragstarted).on("drag",dragged).on("end",dragended);}var edges_text = svg.selectAll(".linetext").data(links).enter().append("text").attr("class","linetext").text(d=> d.relation).style("stroke",(d,i)=>color[i%10]).style("font-size",14);	                var texts=svg.selectAll(".forceText").data(nodes).enter().append("text").attr("class","forceText").style("stroke",(d,i)=>color[i%10]).style("font-size","12px").attr("text-anchor","middle").attr("dy",30).text(d=>d.name);}}
})
</script>