d3.json not working even on local server

Question

I have an index.html, where I include the script source, and

<script>
importData();
</script>

the importData function:

function importData ()
{
    d3.json("data/test.json", function (error, data)
    {
        console.log(data[0]); //neither of the logs work
        console.log(data); //
        var canvas = d3.select(".importData").append("svg")
            .attr("width", 1000)
            .attr("height", 700);

        canvas.selectAll("rect")
            .data(data)
            .enter()
            .append("rect")
            .attr("width", function (d)
            {
                return d.rank * 60;
            })
            .attr("height", 50)
            .attr("y", function (d, i)
            {
                return i * 80
            })
            .attr("fill", "blue");

        canvas.selectAll("text")
            .data(data)
            .enter()
            .append("text")
            .attr("fill", "#ffffff")
            .attr("y", function (d,i)
            {
                return i * 80 + 30;
            })
            .attr("x", 5)
            .text(function (d)
            {
                return d.name + " rank: " + d.rank;
            })
    })
}

The JSON file consists of names, actor, description, and ranks, and it should display a bar graph, based on ranks.

 {"name": "Deadshot", "actor": "Will Smith", "rank": 100, "description": "An expert marksman and assassin."},

The whole console is empty. It is running on a local apache server.

Any ideas why does not the data appear?