CODEWITHSUNDEEP
asp.net-mvcrazord3.js
Scott Chamberlin
Scott Chamberlin

Reputation: 724

D3.js does not render SVG in ASP MVC app

I've got a d3.js script which renders just fine in a .html document outside my app but when I embed it in a .cshtml file inside an mvc app the svg is blank. Can someone help me understand why this isn't rendering? Javascript console in both Chrome and IE show no errors. Thanks

Here is the dom:

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

The .cshtml is:

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

Upvotes: 0

Views: 1404

Answers (1)

Scott Chamberlin
Scott Chamberlin

Reputation: 724

Gleaned most of the answer from this post: d3.json() is not loading data on asp.net mvc

The d3.json method only takes URLs so you need to provide an action to read the file and expose it with a url per the link above. It will not work if you use a file path.

Upvotes: 2

Related Questions