Question

我有一个d3.js脚本在我的应用程序之外的.html文档中呈现得很好但是当我将它嵌入到mvc应用程序内的.cshtml文件中时，svg是空白的。有人可以帮助我理解为什么这不呈现？ Chrome和IE中的Javascript控制台都没有显示任何错误。感谢

这是dom：

<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>

Answer 1

从这篇文章中收集了大部分答案：d3.json() is not loading data on asp.net mvc

d3.json方法只接受URL，因此您需要提供一个操作来读取文件，并根据上面的链接使用url公开它。如果使用文件路径，它将无法工作。

D3.js不会在ASP MVC应用程序中呈现SVG

1 个答案: