Jquery 无法读取Json文件以使用D3.js代码绘制折线图
这段代码由js编程，使用D3库绘制一个折线图。我面临一个错误，控制台显示a（TypeError:e未定义））与d3.v3.min.js:1相关，当我点击firefox的Debbuger点击时，它显示了这行数据 !！函数（）{function n（n，t）{return t>n？-1:n>t1:n>=t0:0/0}function t（n）{return null！=n&&！isNaN（n）}函数e（n）{return{left:function（t，e，r，u）{for（arguments.length>>1；n（t[i]，e）要使用d3.json（），您需要设置一个Web服务器，这很简单。 从windows资源管理器打开文件将显示静态内容，但无法处理通过“HTTP GET”加载更多文件的问题。我想，这可能是由于未加载json文件而导致的“字符串未定义”，因此d3.json中的字符串不仅为空，而且未定义Jquery 无法读取Json文件以使用D3.js代码绘制折线图,jquery,css,json,svg,linechart,Jquery,Css,Json,Svg,Linechart,这段代码由js编程，使用D3库绘制一个折线图。我面临一个错误，控制台显示a（TypeError:e未定义））与d3.v3.min.js:1相关，当我点击firefox的Debbuger点击时，它显示了这行数据 !！函数（）{function n（n，t）{return t>n？-1:n>t1:n>=t0:0/0}function t（n）{return null！=n&&！isNaN（n）}函数e（n）{return{left:function（t，e，r，u）{for（arguments.le
- 下载捆绑在一个易于安装的软件包中
- 将HTML和JSON文件放在“htdocs”文件夹中。在安装路径中查找名为“htdocs”的文件夹（例如C:\xamppfiles\htdocs）
- 由xampp控制中心启动Web服务器
- 在Web浏览器中，导航到localhost/nameofthlfile.html
- 发布回复，你看到了什么，可能会出现什么错误
d3.json( "soD3Question.json", function ( data ) { ... });
var parse = d3.time.format( "%b %Y" ).parse;
var parseAllDates = function ( ) {
for ( var i = 0; i < data[0].Occurrences.length; i++ ) {
data[0].Occurrences[i].OccurrenceDate = parse( data[0].Occurrences[i].OccurrenceDate );
}
}
d3.json( "soD3Question.json", function ( jsonData ) {
data = jsonData;
parseAllDates( ); // call date parser
...
path.domain{fill:lightgrey；}
path.line{fill:white；}
path.area{fill:grey；}
var margin={顶部：80，右侧：80，底部：80，左侧：80}，
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var数据；
var parse=d3.time.format（“%b%Y”）.parse；
var parseAllDates=函数（）{
对于（var i=0；i[{
"Id": 2,
"Name": "ukraine",
"Occurrences": [... ]
}] // brackets are important
d3.json( "soD3Question.json", function ( data ) { ... });
var parse = d3.time.format( "%b %Y" ).parse;
var parseAllDates = function ( ) {
for ( var i = 0; i < data[0].Occurrences.length; i++ ) {
data[0].Occurrences[i].OccurrenceDate = parse( data[0].Occurrences[i].OccurrenceDate );
}
}
d3.json( "soD3Question.json", function ( jsonData ) {
data = jsonData;
parseAllDates( ); // call date parser
...
path.domain{ fill: lightgrey; }
path.line{ fill: white;}
path.area{ fill: grey; }
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
<title></title>
<style>
path.domain {fill: lightgrey;}
path.line {fill: white;}
path.area {fill: grey;}
</style>
</head>
<body>
<script>
var margin = { top: 80, right: 80, bottom: 80, left: 80 },
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var data;
var parse = d3.time.format( "%b %Y" ).parse;
var parseAllDates = function () {
for ( var i = 0; i < data[0].Occurrences.length; i++ ) {
data[0].Occurrences[i].OccurrenceDate = parse( data[0].Occurrences[i].OccurrenceDate );
}
}
// Scales and axes. Note the inverted domain for the y-scale: bigger is up!
var x = d3.time.scale().range( [0, width] ),
y = d3.scale.linear().range( [height, 0] ),
xAxis = d3.svg.axis().scale( x ).tickSize( -height ).tickSubdivide( true ),
yAxis = d3.svg.axis().scale( y ).ticks( 4 ).orient( "right" );
// An area generator, for the light fill.
var area = d3.svg.area()
.interpolate( "monotone" )
.x( function ( d ) {
return x( d.OccurrenceDate );
} )
.y0( height )
.y1( function ( d ) {
return y( d.OccurrenceFrequency );
} );
// A line generator, for the dark stroke.
var line = d3.svg.line()
.interpolate( "monotone" )
.x( function ( d ) {
return x( d.OccurrenceDate );
} )
.y( function ( d ) {
return y( d.OccurrenceFrequency );
} );
// d3.json( "soD3Question.json", type, function ( error, data ) {
d3.json( "soD3Question.json", function ( jsonData ) {
data = jsonData;
parseAllDates();
// Filter to one Name; ukraine.
var values = data.filter( function ( d ) {
return d.Name == "ukraine";
} );
// Compute the minimum and maximum date, and the maximum OccurrenceFrequency.
values = values[0].Occurrences;
x.domain( [values[0].OccurrenceDate, values[values.length - 1].OccurrenceDate ] );
y.domain( [0, d3.max( values, function ( d ) {
return d.OccurrenceFrequency;
} )] ).nice();
// Add an SVG element with the desired dimensions and margin.
var svg = d3.select( "body" ).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 + ")" )
.on( "click", click );
// Add the clip path.
svg.append( "clipPath" )
.attr( "id", "clip" )
.append( "rect" )
.attr( "width", width )
.attr( "height", height );
// Add the x-axis.
svg.append( "g" )
.attr( "class", "x axis" )
.attr( "transform", "translate(0," + height + ")" )
.call( xAxis );
// Add the y-axis.
svg.append( "g" )
.attr( "class", "y axis" )
.attr( "transform", "translate(" + width + ",0)" )
.call( yAxis );
// Add the line path.
svg.append( "path" )
.attr( "class", "line" )
.attr( "clip-path", "url(#clip)" )
.attr( "d", line( values ) );
// Add the area path.
svg.append( "path" )
.attr( "class", "area" )
// .attr( "clip-path", "url(#clip)" ) // needs to be defined
.attr( "d", area( values ) );
// Add a small label for the name.
svg.append( "text" )
.attr( "x", width - 6 )
.attr( "y", height - 6 )
.style( "text-anchor", "end" )
.text( values[0].Name );
// On click, update the x-axis.
function click() {
var n = values.length - 1,
i = Math.floor( Math.random() * n / 2 ),
j = i + Math.floor( Math.random() * n / 2 ) + 1;
x.domain( [values[i].OccurrenceDate, values[j].OccurrenceDate] );
var t = svg.transition().duration( 750 );
t.select( ".x.axis" ).call( xAxis );
t.select( ".area" ).attr( "d", area( values ) );
t.select( ".line" ).attr( "d", line( values ) );
}
} );
</script>
</body>
</html>