Note that there are some explanatory texts on larger screens.

plurals
  1. POD3.js does not render SVG in ASP MVC app
    primarykey
    data
    text
    <p>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</p> <p>Here is the dom:</p> <pre><code>&lt;svg width="1920" height="1000"&gt; &lt;rect class="background" width="1920" height="1000"/&gt; &lt;g transform="translate(960 500)"&gt; &lt;g id="states"/&gt; </code></pre> <p>The .cshtml is:</p> <pre><code>&lt;style&gt; .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; } &lt;/style&gt; &lt;script src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt; &lt;script src="http://d3js.org/queue.v1.min.js"&gt;&lt;/script&gt; &lt;script&gt; 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"); }); &lt;/script&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload