项目六 数据可视化图表展示 练习题答案

练习题（参考答案）1.下面有一段柱形图应用有关的代码，请填空补充完整。<script>//库存量varagriculturalData=[{product:"苹果",yield:320},{product:"香蕉",yield:220},{product:"水稻",yield:520},{product:"小麦",yield:260},{product:"玉米",yield:500}];//创建SVG元素varsvg=d3.select("#chart").append("svg").attr("width",400).attr("height",300);//创建柱形图比例尺varyScale=d3.scaleLinear().domain([0,d3.max(【1】agriculturalData,function(d){returnd.yield;})]).range([0,250]);//创建矩形条svg.selectAll("rect").data(【2】agriculturalData).enter().append("rect").attr("class","bar").attr("x",function(d,i){returni*80;}).attr("y",function(d){return50+250-yScale(d.yield);//通过比例尺缩放柱形图高度}).attr("width",50).attr("height",function(d){returnyScale(d.yield);})//添加数据标注svg.selectAll(".label").data(【3】agriculturalData).enter().append("text").text(function(d){returnd.yield+"吨";}).attr("class","label").attr("x",function(d,i){returni*80+25;//设置为矩形条的中心点}).attr("y",function(d){return50+250-yScale(d.yield)-5;//将标注文本略微上移一些});//添加产品名称svg.selectAll(".label2").data(【4】agriculturalData).enter().append("text").text(function(d){returnduct;}).attr("class","label2").attr("x",function(d,i){returni*80+25;//设置为矩形条的中心点}).attr("y",function(d){return280;//将标注文本略微上移一些}); </script>2.下面有一段饼形图应用有关的代码，请填空补充完整。<script>vardataset=[{category:'水果蔬菜类',value:30},{category:'肉类熟食类',value:20},{category:'面包糕点类',value:25},{category:'冷冻食品类',value:15},{category:'粮油副食类',value:10}];varwidth=600;varheight=400;varradius=Math.min(width,height)/2;varcolor=d3.scaleOrdinal(d3.schemeCategory10);varsvg=d3.select("#box").append("svg").attr("width",width).attr("height",height).append("g").attr("transform","translate("+width/2+","+height/2+")");vararc=svg.selectAll(".arc").data(pie(【1】dataset)).enter().append("g").attr("class","arc");varlegend=d3.select(".legend").selectAll(".legend-item").data(【2】dataset).enter().append("div").attr("class","legend-item");</script>3.下面有一段折线图应用有关的代码，请填空补充完整。<script>//数据集vardataset=[{day:'周一',count:20},{day:'周二',count:76},{day:'周三',count:60},{day:'周四',count:82},{day:'周五',count:40},{day:'周六',count:50},{day:'周日',count:35}];//定义画布大小varwidth=600;varheight=400;//在页面上创建SVG元素varsvg=d3.select("#chart").append("svg").attr("width",width).attr("height",height);//定义x和y的比例尺varxScale=d3.scaleBand().domain(dataset.map(function(d){returnd.day;})).range([0,width]).paddingInner(0.1);varyScale=d3.scaleLinear().domain([0,d3.max(dataset,function(d){returnd.count;})*1.2])//调整y轴的范围.range([height,0]);//创建折线生成器varline=d3.【1】line().x(function(d){returnxScale(d.day)+xScale.bandwidth()/2;}).y(function(d){returnyScale(d.count);});//绘制折线svg.append("path").datum(【2】dataset).attr("fill","none").attr("stroke","steelblue").attr("stroke-width",2).attr("d",line);//添加数据标签svg.selectAll(".text-label").data(【3】dataset).enter().append("text").attr("class","text-label").attr("x",function(d){returnxScale(d.day)+xScale.bandwidth()/2;}).attr("y",function(d){returnyScale(d.count)-10;}).text(function(d){returnd.count;}).attr("text-anchor","middle");//添加折线上的圆点svg.selectAll(".dot").data(【4】dataset)