有一个很棒的网站:http://d3-generator.com/
我做了一个保存网页 - 完成，它现在在我的桌面上。
当我在本地运行保存的版本时，一切看起来都像网站的在线版本，我复制粘贴相同的 CSV 并单击“生成图表”按钮，但此时我得到的错误是:
这真的很容易重现，你只需保存那个网页并尝试在本地运行它，你就会得到那个错误。
最佳答案
我调试了文件，它说
“跨源请求仅支持 HTTP。”
您需要实际运行一个网络服务器，并向该服务器上的 URI 发起获取请求，例如 http://localhost/graph/creator.htm，而不是向一份文件;例如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 文件，图表将生成。
最好的问候
关于javascript - 保存的网页显示 Javascript 错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15605975/