为什么我的d3js绘制的折线图形是这样的???大神求助

图片说明
代码如下,<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



无标题文档 .axis path, .axis line{ fill:none; stroke:black; shape-renderig:crispEdges; } .axis text{ font-family:Tahoma, Geneva, sans-serif; font-size:11px; } .MyRect{ fill:stealblue; } .MyText{ fill:white; text-anchor:middle;}

var body=d3.select("body"); var width=400; var height=400; var svg=body.append("svg") .attr("width",400) .attr("height",400); //1.读取文件 //(1)d3.text() //(2)d3.json() /*d3.text("example.txt",function(error,txtdata){ if(error) console.log(error); console.log(txtdata); });*/ d3.json("example.json",function(error,jsondata){ if(error) console.log(error); console.log(jsondata); var xmax=d3.max(jsondata.data, function(d){return d.x;}); var ymax=d3.max(jsondata.data, function(d){return d.y;}); var xScale=d3.scale.linear() .domain([0,xmax]) .range([0,300]); var yScale=d3.scale.linear() .domain([0,ymax]) .range([250,0]); //添加坐标轴 var xAxis=d3.svg.axis() .scale(xScale) .orient("bottom"); var gxAxis=svg.append("g") .attr("class","axis") .attr("transform","translate(30,350)") .call(xAxis); var yAxis=d3.svg.axis() .scale(yScale) .orient("left"); var gyAxis=svg.append("g") .attr("class","axis") .attr("transform","translate(30,100)") .call(yAxis); //2.线段生成器 var line=d3.svg.line() .x(function(d){return xScale(d.x);}) .y(function(d){return yScale(d.y);}) .interpolate("basis"); //3.折线图 svg.append("path") .attr("class","MyPath") .attr("d",line(jsondata.data)) .attr("transform","translate(30,100)"); });//根据坐标系进行平移


4个回答

.style('fill-opacity',0)

亲 你这个问题解决了吗 我也出现同样的问题了

fill设为none

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐