I’m trying to create a bar chart for a sample data in the d3.js editor in powerbi, but I’m always getting a blank visual or else just a visual with only 2 lines as x and y axes. Below is the code I’ve used

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

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], 0.9);

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

var svg = d3.select("#chart")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");



pbi.dsv(type, function(Metal) {
    x.domain(Metal.map(function(d) { return d.Metal; }));
    y.domain([0, d3.max(Metal, function(d) { return d.Force; })]);

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.svg.axis().scale(x).orient("bottom"))

    svg.append("g")
        .attr("class", "y axis")
        .call(d3.svg.axis().scale(y).orient("left"));
  
    svg.selectAll(".bar")
        .data(Metal)
        .enter()
        .append("rect")
        .style("fill", pbi.colors[0]) // First color of provided color array
        .attr("x", function(d) { return x(d.Metal); })
        .attr("width", x.rangeBand())
        .attr("y", function(d) { return y(d.Force); })
        .attr("height", function(d) { return height - y(d.Force); });


});

function type(d) {
    d.Force = +d.Force;
    return d;
}

I’m only getting the below result .I’m unable to debug what’s the issue?