javascript - why does it fail saying that d3 is not defined when served as string in webbrowser -
i trying launch wpf webbrowser string. have java script file referenced in head section points file on drive. looks me still fails. ideas?
string served webbrowser:
<!doctype html> <meta charset="utf - 8"> <head> <script src="file:///c:/users/ksobon/appdata/roaming/dynamo/dynamo%20revit/1.0/packages/extra/d3/d3.v3.min.js"></script> <link rel="stylesheet" href="file:///c:/users/ksobon/appdata/roaming/dynamo/dynamo%20revit/1.0/packages/extra/bootstrap/css/bootstrap.min.css"> <style> body { font: 10px arial; } .axis path { fill: none; stroke: grey; shape-rendering: crispedges; } .axis text { font-family: arial; font-size: 10px; } .axis line { fill: none; stroke: grey; stroke-width: 1; shape-rendering: crispedges; } </style> </head> <div class="row"> <div class="col-md-12" id="linelinechart1" align="center"> <script> function renderlinechart() { var data = [{"name":"24-apr-07","value":93.24},{"name":"25-apr-07","value":95.35},{"name":"26-apr-07","value":98.84},{"name":"27-apr-07","value":99.92},{"name":"30-apr-07","value":99.8},{"name":"1-may-07","value":99.47},{"name":"2-may-07","value":100.39},{"name":"3-may-07","value":100.4},{"name":"4-may-07","value":100.81},{"name":"7-may-07","value":103.92},{"name":"8-may-07","value":105.06},{"name":"9-may-07","value":106.88},{"name":"10-may-07","value":107.34},{"name":"11-may-07","value":108.74},{"name":"14-may-07","value":109.36},{"name":"15-may-07","value":107.52},{"name":"16-may-07","value":107.34},{"name":"17-may-07","value":109.44},{"name":"18-may-07","value":110.02},{"name":"21-may-07","value":111.98},{"name":"22-may-07","value":113.54},{"name":"23-may-07","value":112.89},{"name":"24-may-07","value":110.69},{"name":"25-may-07","value":113.62},{"name":"29-may-07","value":114.35},{"name":"30-may-07","value":118.77},{"name":"31-may-07","value":121.19},{"name":"1-jun-07","value":118.4},{"name":"4-jun-07","value":121.33}]; var tickvalues = data.map(function (d){return d.name;}); var step = math.floor(tickvalues.length / 5); var indexes = d3.range(0,tickvalues.length, step); if (indexes.indexof(tickvalues.length - 1) == -1){ indexes.push(tickvalues.length - 1); } var tickarray = d3.permute(tickvalues, indexes); var margin = { top: 20, right: 20, bottom: 30, left: 50 }, width = 547 - margin.left - margin.right, height = 400 - margin.top - margin.bottom; var x = d3.scale.ordinal() .domain(data.map(function (d) { return d.name; })) .rangepoints([0, width], 2); var y = d3.scale.linear() .range([height, 0]); var xaxis = d3.svg.axis() .scale(x) .orient("bottom") .tickvalues(tickarray); var yaxis = d3.svg.axis() .scale(y) .orient("left"); var line = d3.svg.line() .x(function (d) { return x(d.name); }) .y(function (d) { return y(d.value); }); var svg = d3.select("#linelinechart1").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); data.foreach(function (d) { d.name = d.name; d.value = +d.value;}); y.domain([0, 200]); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xaxis); svg.append("g") .attr("class", "y axis") .call(yaxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("label"); svg.append("path") .datum(data) .attr("d", line) .attr("stroke", "#fa0000") .attr("stroke-width", 2) .attr("fill", "none"); } renderlinechart(); </script> </div> </div>
previously reference d3.min.js placed after <script>
tag , before renderlinechart() function call , worked fine.
so appears answer within string formatting space in file path name replaced %20
, rendered such path unreadable. used uri.unescapedatastring()
clean , works great. thanks!
Comments
Post a Comment