怎么用json把确定初始数据这块写出来然后在html调用,没写过json,不知道怎么调用怎么写
<style> .tooltip{ font-family: simsun; font-size: 14px; width: 130; line-height:20px; position: absolute; text-align: center; border-style: solid; border-width: 1px; background-color: white; border-radius: 5px; padding:10px 0; } </style> <script src="d3.v3.min.js" charset="utf-8"></script> <body> <div id="box"></div> <script> var width = 600; //SVG绘制区域的宽度 var height = 600; //SVG绘制区域的高度 var svg = d3.select("#box") //选择box .append("svg") //在box中添加<svg> .attr("width", width) //设定<svg>的宽度属性 .attr("height", height);//设定<svg>的高度属性 //1.确定初始数据 var dataset = [ ["小米",60.8] , ["三星",58.4] , ["联想",47.3] , ["苹果",46.6] , ["华为",41.3] , ["酷派",40.1] , ["其他",111.5] ]; //2.转换数据 var pie = d3.layout.pie() .value(function(d){ return d[1]; }); var piedata = pie(dataset); console.log(piedata); //3.绘制 //字体大小 var fontsize = 14; //外半径和内半径 var outerRadius = 400 / 3; var innerRadius = 0; //创建弧生成器 var arc = d3.svg.arc() .innerRadius(innerRadius) .outerRadius(outerRadius); var color = d3.scale.category20(); //添加对应数目的弧组,即<g>元素 var arcs = svg.selectAll("g") .data(piedata) //绑定转换后的数据piedata .enter() .append("g") .attr("transform","translate("+( outerRadius )+","+ ( outerRadius ) +")"); //绘制弧 arcs.append("path") .attr("fill",function(d,i){ return color(i); //设定弧的颜色 }) .attr("d",function(d){ return arc(d); //使用弧生成器 }); //绘制弧内的文字 arcs.append("text") .attr("transform",function(d){ var x = arc.centroid(d)[0] * 1.4; //文字的x坐标 var y = arc.centroid(d)[1] * 1.4; //文字的y坐标 return "translate(" + x + "," + y + ")"; }) .attr("text-anchor","middle") .style("font-size",fontsize) .text(function(d){ //计算市场份额的百分比 var percent = Number(d.value)/d3.sum(dataset,function(d){ return d[1]; }) * 100; //保留1位小数点,末尾加一个百分号返回 return percent.toFixed(1) + "%"; }); //添加一个提示框 var tooltip = d3.select("body") .append("div") .attr("class","tooltip") .style("opacity",0.0); arcs.on("mouseover",function(d){ /* 鼠标移入时, (1)通过 selection.html() 来更改提示框的文字 (2)通过更改样式 left 和 top 来设定提示框的位置 (3)设定提示框的透明度为1.0(完全不透明) */ tooltip.html(d.data[0] + "的出货量为" + "<br />" + d.data[1] + " 百万台") .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY + 20) + "px") .style("opacity",1.0); }) .on("mousemove",function(d){ /* 鼠标移动时,更改样式 left 和 top 来改变提示框的位置 */ tooltip.style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY + 20) + "px"); }) .on("mouseout",function(d){ /* 鼠标移出时,将透明度设定为0.0(完全透明)*/ tooltip.style("opacity",0.0); }); </script>
付费偷看金额在0.1-10元之间
使用 浏览器
JSON.stringify
方法输出的就是json字符串一周热门 更多>