asp.net-mvc - D3.js が ASP MVC アプリで SVG をレンダリングしない

Question

アプリ外の .html ドキュメントで問題なくレンダリングされる d3.js スクリプトがありますが、mvc アプリ内の .cshtml ファイルに埋め込むと、svg が空白になります。これがレンダリングされない理由を誰かが理解するのを手伝ってくれますか? Chrome と IE の両方の Javascript コンソールにエラーは表示されません。ありがとう

ドムは次のとおりです。

<svg width="1920" height="1000">
    <rect class="background" width="1920" height="1000"/>
    <g transform="translate(960 500)">
        <g id="states"/>

.cshtml は次のとおりです。

<style>

.background {
    fill: none;
    pointer-events: all;
}

#states {
    fill: green;
    stroke: #000000;
    stroke-width: .5px;
}

#pct {
    stroke: blue;
    fill: blue;
    stroke-width: .5px;
}

#states .active {
    fill: steelblue;
}

</style>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>

<script>

var height = 1000,
    width = 1920,
    centered;

var projection = d3.geo.albersUsa()
        .scale(width)
        .translate([0,0]);

var path = d3.geo.path("~/Map_Data/states.geojson")
        .projection(projection);

var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

svg.append("rect")
    .attr("class", "background")
    .attr("width", width)
    .attr("height", height);


var g = svg.append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
        .append("g")
        .attr("id", "states");

 d3.json("@(HttpContext.Current.Server.MapPath("~/Map_Data/states.geojson"))", function (data) {
    g.selectAll("path").data(data.features)
        .enter().append("path")
        .attr("d", path)
        .attr("id", "states");
});
</script>