怎么用json把確定初始數(shù)據(jù)這塊寫(xiě)出來(lái)然后在html調(diào)用，沒(méi)寫(xiě)過(guò)json,不知道怎么調(diào)用怎么寫(xiě)
<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繪制區(qū)域的寬度 var height = 600;//SVG繪制區(qū)域的高度var svg = d3.select("#box")//選擇box .append("svg")//在box中添加<svg> .attr("width", width)//設(shè)定<svg>的寬度屬性 .attr("height", height);//設(shè)定<svg>的高度屬性//1.確定初始數(shù)據(jù) var dataset = [ ["小米",60.8] , ["三星",58.4] , ["聯(lián)想",47.3] , ["蘋(píng)果",46.6] , ["華為",41.3] , ["酷派",40.1] , ["其他",111.5] ];//2.轉(zhuǎn)換數(shù)據(jù) var pie = d3.layout.pie() .value(function(d){ return d[1]; });var piedata = pie(dataset);console.log(piedata);//3.繪制//字體大小 var fontsize = 14;//外半徑和內(nèi)半徑 var outerRadius = 400 / 3; var innerRadius = 0;//創(chuàng)建弧生成器 var arc = d3.svg.arc() .innerRadius(innerRadius) .outerRadius(outerRadius);var color = d3.scale.category20();//添加對(duì)應(yīng)數(shù)目的弧組，即<g>元素 var arcs = svg.selectAll("g") .data(piedata)//綁定轉(zhuǎn)換后的數(shù)據(jù)piedata .enter() .append("g") .attr("transform","translate("+( outerRadius )+","+ ( outerRadius ) +")");//繪制弧 arcs.append("path") .attr("fill",function(d,i){ return color(i);//設(shè)定弧的顏色 }) .attr("d",function(d){ return arc(d);//使用弧生成器 });//繪制弧內(nèi)的文字 arcs.append("text") .attr("transform",function(d){ var x = arc.centroid(d)[0] * 1.4;//文字的x坐標(biāo) var y = arc.centroid(d)[1] * 1.4;//文字的y坐標(biāo) return "translate(" + x + "," + y + ")"; }) .attr("text-anchor","middle") .style("font-size",fontsize) .text(function(d){ //計(jì)算市場(chǎng)份額的百分比 var percent = Number(d.value)/d3.sum(dataset,function(d){ return d[1]; }) * 100;//保留1位小數(shù)點(diǎn)，末尾加一個(gè)百分號(hào)返回 return percent.toFixed(1) + "%"; });//添加一個(gè)提示框 var tooltip = d3.select("body") .append("div") .attr("class","tooltip") .style("opacity",0.0);arcs.on("mouseover",function(d){ /* 鼠標(biāo)移入時(shí)， （1）通過(guò) selection.html() 來(lái)更改提示框的文字 （2）通過(guò)更改樣式 left 和 top 來(lái)設(shè)定提示框的位置 （3）設(shè)定提示框的透明度為1.0（完全不透明） */tooltip.html(d.data[0] + "的出貨量為" + "<br />" + d.data[1] + " 百萬(wàn)臺(tái)") .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY + 20) + "px") .style("opacity",1.0); }) .on("mousemove",function(d){ /* 鼠標(biāo)移動(dòng)時(shí)，更改樣式 left 和 top 來(lái)改變提示框的位置 */tooltip.style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY + 20) + "px"); }) .on("mouseout",function(d){ /* 鼠標(biāo)移出時(shí)，將透明度設(shè)定為0.0（完全透明）*/tooltip.style("opacity",0.0); }); </script>
加載中...