D3.js visual does not render the chart.

I tried to render D3.js visual code into Power BI, but it does not render any chart. 

Can anybody help this issue ?

This is my code. 

var margin = {top: 20, right: 20, bottom: 20, left: 20},
width = pbi.width - margin.left - margin.right, // ALTER: Changed fixed width with the 'pbi.width' variable
height = pbi.height - margin.top - margin.bottom; // ALTER: Changed fixed height with the 'pbi.height' variable

var parseDate = d3.time.format("%d%b%y").parse;

var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);

var yAxisLeft = d3.svg.axis().scale(y)
.orient("left").ticks(5);

var valueline = d3.svg.line()
.x(function (d) {return x(d.forecast_rfs);})
.y(function (d) {return x(d.weight);})
.interpolate("linear");

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 + ")");

// ALTER: Replaced the d3.tsv function with the pbi variant: pbi.dsv
pbi.dsv(function(data) {
data.forEach(function(d) {
d.forecast_rfs = parseDate(d.forecast_rfs);
d.mod_sap = +d.mod_sap;

});

x.domain(d3.extent(data, function (d) { return d.forecast_rfs; }));
y.domain([0, d3.max(data, function(d) { return Math.max(d.weight); })]);

svg.append("path")
.attr("class", "line")
.stlye("stroke", "red")
.attr("d", valueline(data));

svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + height + ")")
.call(xAxis);

svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + width + " ,0)")
.style("fill", "steelblue")
.call(yAxisLeft);

});