2

有这个很棒的网站：http ://d3-generator.com/

我做了一个保存网页-完成，它现在在我的桌面上。

当我在本地运行保存的版本时，一切看起来都像网站的在线版本，我复制粘贴相同的 CSV 并单击“生成图表”按钮，但此时这是我得到的错误：

在此处输入图像描述

这真的很容易重现，您只需保存该网页并尝试在本地运行它，您就会收到该错误。

4

1 回答 1

1

我调试了文件，它说 “Cross origin requests are only supported for HTTP."

您需要实际运行一个网络服务器，并向该服务器上的 URIhttp://localhost/graph/creator.htm发出 get 请求，而不是向文件发出 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-25T00:57:26.033 回答