0

我有一个 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>
4

1 回答 1

2

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

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

于 2013-08-11T04:50:05.243 回答