保存的網頁顯示的Javascript誤差修改

有這個偉大的網站：http://d3-generator.com/保存的網頁顯示的Javascript誤差修改

我做了保存網頁完成，現在是我的桌面上。

當我在本地運行保存的版本，一切看起來就像網站的在線版本，我複製粘貼相同的CSV，然後點擊「生成圖表」按鈕，但在這一點上，這是我的錯誤：

enter image description here

這真的很容易重現，你只是保存該網頁，並嘗試在本地運行它，你會得到那個錯誤。有人可以看一看，看看哪裏出了問題嗎？真的很感激它。

2013-03-25 Bohn

我調試的文件，它說 「Cross origin requests are only supported for HTTP."

您需要實際運行一個Web服務器，使GET請求到URI該服務器像http://localhost/graph/creator.htm，而不是使GET請求的文件;例如file:///C:/Users/myuser/Downloads/Creator.htm

並非所有的時間，當你在本地保存網站時，一切都將工作。有時候，網站上使用的所有引用也將被保存，這就是爲什麼它的某些部分將無法正常工作。

在＃3：源代碼編輯器只需點擊導出HTML

HTML導出來源：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- Generated with d3-generator.com --> 
<html> 
    <head> 
    <title>Bar Chart</title> 
    <meta http-equiv="X-UA-Compatible" content="IE=9"> 
    </head> 
    <body> 
    <div id="chart"></div> 
    <script src="http://d3js.org/d3.v2.min.js"></script> 
    <script> 
function renderChart() { 

var data = d3.csv.parse(d3.select('#csv').text()); 
var valueLabelWidth = 40; // space reserved for value labels (right) 
var barHeight = 20; // height of one bar 
var barLabelWidth = 100; // space reserved for bar labels 
var barLabelPadding = 5; // padding between bar and bar labels (left) 
var gridLabelHeight = 18; // space reserved for gridline labels 
var gridChartOffset = 3; // space between start of grid and first bar 
var maxBarWidth = 420; // width of the bar with the max value 

// data aggregation 
var aggregatedData = d3.nest() 
    .key(function(d) { return d['Average Life Expectancy']; }) 
    .rollup(function(d) { 
    return { 
     'value': d3.sum(d, function(e) { return parseFloat(e['Average Life Expectancy']); }) 
    }; 
    }) 
    .entries(data); 

// accessor functions 
var barLabel = function(d) { return d.key; }; 
var barValue = function(d) { return d.values.value; }; 

// sorting 
var sortedData = aggregatedData.sort(function(a, b) { 
    return d3.ascending(barValue(a), barValue(b)); 
}); 

// scales 
var yScale = d3.scale.ordinal().domain(d3.range(0, sortedData.length)).rangeBands([0, sortedData.length * barHeight]); 
var y = function(d, i) { return yScale(i); }; 
var yText = function(d, i) { return y(d, i) + yScale.rangeBand()/2; }; 
var x = d3.scale.linear().domain([0, d3.max(sortedData, barValue)]).range([0, maxBarWidth]); 
// svg container element 
var chart = d3.select('#chart').append("svg") 
    .attr('width', maxBarWidth + barLabelWidth + valueLabelWidth) 
    .attr('height', gridLabelHeight + gridChartOffset + sortedData.length * barHeight); 
// grid line labels 
var gridContainer = chart.append('g') 
    .attr('transform', 'translate(' + barLabelWidth + ',' + gridLabelHeight + ')'); 
gridContainer.selectAll("text").data(x.ticks(10)).enter().append("text") 
    .attr("x", x) 
    .attr("dy", -3) 
    .attr("text-anchor", "middle") 
    .text(String); 
// vertical grid lines 
gridContainer.selectAll("line").data(x.ticks(10)).enter().append("line") 
    .attr("x1", x) 
    .attr("x2", x) 
    .attr("y1", 0) 
    .attr("y2", yScale.rangeExtent()[1] + gridChartOffset) 
    .style("stroke", "#ccc"); 
// bar labels 
var labelsContainer = chart.append('g') 
    .attr('transform', 'translate(' + (barLabelWidth - barLabelPadding) + ',' + (gridLabelHeight + gridChartOffset) + ')'); 
labelsContainer.selectAll('text').data(sortedData).enter().append('text') 
    .attr('y', yText) 
    .attr('stroke', 'none') 
    .attr('fill', 'black') 
    .attr("dy", ".35em") // vertical-align: middle 
    .attr('text-anchor', 'end') 
    .text(barLabel); 
// bars 
var barsContainer = chart.append('g') 
    .attr('transform', 'translate(' + barLabelWidth + ',' + (gridLabelHeight + gridChartOffset) + ')'); 
barsContainer.selectAll("rect").data(sortedData).enter().append("rect") 
    .attr('y', y) 
    .attr('height', yScale.rangeBand()) 
    .attr('width', function(d) { return x(barValue(d)); }) 
    .attr('stroke', 'white') 
    .attr('fill', 'steelblue'); 
// bar value labels 
barsContainer.selectAll("text").data(sortedData).enter().append("text") 
    .attr("x", function(d) { return x(barValue(d)); }) 
    .attr("y", yText) 
    .attr("dx", 3) // padding-left 
    .attr("dy", ".35em") // vertical-align: middle 
    .attr("text-anchor", "start") // text-align: right 
    .attr("fill", "black") 
    .attr("stroke", "none") 
    .text(function(d) { return d3.round(barValue(d), 2); }); 
// start line 
barsContainer.append("line") 
    .attr("y1", -gridChartOffset) 
    .attr("y2", yScale.rangeExtent()[1] + gridChartOffset) 
    .style("stroke", "#000"); 

} 
    </script> 
    <script id="csv" type="text/csv">Name,Population (mill),Average Life Expectancy,Area (1000 sq mi),Continent 
Canada,33.9,80.7,3854.085,America 
US,308.3,78.2,3784.191,America 
Germany,82.3,79.4,137.847,Europe 
Russia,141.9,65.5,6601.668,Europe 
Mexico,108.4,76.06,758.449,America 
Brazil,193.3,71.99,3287.612,America 
Spain,46.9,80.9,195.365,Europe 
France,65.4,80.98,244.339,Europe 
China,1339,73,3705.407,Asia 
Australia,22.4,81.2,2969.907,Australia 
UK,62,79.4,93.800,Europe 
Italy,60.3,80.5,116.346,Europe 
India,1184,64.7,1236.085,Asia 
Japan,127.4,82.6,145.920,Asia 
Iceland,0.3,81.8,40.000,Europe 
Portugal,10.6,78.1,35.560,Europe 
South Africa,50,49.3,471.445,Africa 
Egypt,78.9,71.3,387.000,Africa 
Sweden,9.3,80.9,170.410,Europe</script> 
    <script>renderChart();</script> 
    </body> 
</html>

單擊複製到剪貼板，將其粘貼在文本編輯器，然後將其保存爲HTML。

打開你的Html文件並生成圖形。

最好的問候

來源

2013-03-25 00:57:26 BizApps

非常感謝您對此進行調查，我仍然不完全明白該怎麼做？我應該複製粘貼您提供的源代碼並保存爲HTML？在什麼名字下保存它？你能否請詳細解釋一下這些步驟。謝謝。 – Bohn 2013-03-25 01:04:16

哦，你的意思是保存這個HTML並打開它？這不是我想要的。我希望該網站的保存版本能夠正常運行，所以在運行時我可以播放其數字並繪製圖表。 – Bohn 2013-03-25 01:08:33

我對該文件進行了調試，它說「只支持HTTP的跨源請求」。您需要真正運行Web服務器，並向該服務器上的URI發出get請求，如http：// localhost/graph/creator.htm，而不是向文件發出獲取請求;例如file：/// C：/Users/myuser/Downloads/Creator.htm – BizApps 2013-03-25 01:49:56

保存的網頁顯示的Javascript誤差修改

回答

相關問題