Network (force-directed) visual using power BI d3 custom visual

Hi All, 

I'm having trouble getting a force-directed visual to display in Power BI, I think its related to how the data is referenced. I can get it working outside of Power Bi but just can't get it working in Power BI. Here it what it looks like (just using dummy data, which has the form of four colums name, group, source and target. I loaded the data into Power BI from a csv file).

Simple force-directed chart

The dummy data I used was,

and here is the code that I wrote outside of Power BI

var margin = {top: 10, right: 30, bottom: 30, left: 40},
  width = 400 - margin.left - margin.right,
  height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("body")
.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 + ")");

var force = d3.layout.force()
  .gravity(0.1)
  .distance(100)
  .charge(-700)
  .size([width,height]);

var color = function(group) {
  if (group==1) {return "#aaa"}
  else if (group==2) {return "#fbc280"}
  else {return "#405275"}};

var links = [];
var nodes = [];


// d3.json("Network.json", function(error, data) {
//   if (error) throw error;
d3.csv("Network.csv")
  .row(function(d) {return {name:d.name, group:Number(d.group),source:Number(d.source), target:Number(d.target)};})
  .get(function(error,data) {
  for(var i = 0;i < 10; i++){
    links.push({"source":data[i].source,
                "target":data[i].target
                })
    nodes.push({"name":data[i].name,
                 "group":data[i].group
                })
  };
  var dat = {"nodes":nodes, "links":links}
  console.log(dat);
  console.log(dat.nodes);
  console.log(dat.links);
  force
    .nodes(dat.nodes)
    .links(dat.links)
    .start();

  var link = svg.selectAll(".link")
    .data(dat.links)
    .enter()
    .append("line")
      .attr("class","link");
  var node = svg.selectAll(".node")
      .data(dat.nodes)
      .enter()
      .append("g")
        .attr("class", "node")
        .call(force.drag);
  node
    .append('circle')
      .attr('r', 13)
      .attr('fill', function (d) {
        return color(d.group);});
  node
    .append("text")
        .attr("dx", -18)
        .attr("dy", 8)
        .style("font-family", "overwatch")
        .style("font-size", "18px")
        .text(function (d) {
          return d.name});

  force.on("tick", function () {
      link
        .attr("x1", function (d) {
            return d.source.x;})
        .attr("y1", function (d) {
            return d.source.y;})
        .attr("x2", function (d) {
            return d.target.x;})
        .attr("y2", function (d) {
            return d.target.y;});
      node
        .attr("transform", function (d) {
          return "translate(" + d.x + "," + d.y + ")";});
  });
// //console.log(links);
// //console.log(nodes);
});

And here is the code I'm trying to get running in Power BI (adapted from the above code).

var margin = {top: 10, right: 30, bottom: 30, left: 40},
  width = pbi.width - margin.left - margin.right,
  height = pbi.height - margin.top - margin.bottom;

// append the svg object to chart
var svg = d3.select("#chart")
.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 + ")");

var force = d3.layout.force()
  .gravity(0.1)
  .distance(100)
  .charge(-700)
  .size([width,height]);

var color = function(group) {
  if (group==1) {return "#aaa"}
  else if (group==2) {return "#fbc280"}
  else {return "#405275"}};

var links = [];
var nodes = [];



pbi.dsv(function(data) {
  for(var i = 0;i < 10; i++){
  links.push({"source":data[i].source,
              "target":data[i].target
             })
  nodes.push({"name":data[i].name,
              "group":data[i].group
             })
  };
  var dat = {"nodes":nodes, "links":links}

  force
    .nodes(dat.nodes)
    .links(dat.links)
    .start();

  var link = svg.selectAll(".link")
    .data(dat.links)
    .enter()
    .append("line")
      .attr("class","link");
  var node = svg.selectAll(".node")
      .data(dat.nodes)
      .enter()
      .append("g")
        .attr("class", "node")
        .call(force.drag);
  node
    .append('circle')
      .attr('r', 13)
      .attr('fill', function (d) {
        return color(d.group);});
  node
    .append("text")
        .attr("dx", -18)
        .attr("dy", 8)
        .style("font-family", "allan")
        .style("font-size", "18px")
        .text(function (d) {
          return d.name});

  force.on("tick", function () {
      link
        .attr("x1", function (d) {
            return d.source.x;})
        .attr("y1", function (d) {
            return d.source.y;})
        .attr("x2", function (d) {
            return d.target.x;})
        .attr("y2", function (d) {
            return d.target.y;});
      node
        .attr("transform", function (d) {
          return "translate(" + d.x + "," + d.y + ")";});
  });
});

If anyone can provide some help than I would be very greatful.