如何在.js文件中更改d3.js饼图的代码

问题描述：

我是d3.js中的新成员。我正在尝试制作一个simle饼图程序。我制作了一个独立的pie.js文件，我在其中编写了饼图代码。我将它链接到html文件chart.html。其作品！如何在.js文件中更改d3.js饼图的代码

问题：我想在chart.html页面中手动更改饼图值。像pir图表加载html文件时，我想在此之前修改值。

任何机构都可以告诉我该怎么做？

chart.html <html lang="en"> <head> <meta charset="utf-8"> <title>D3: Pie layout</title> <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> <script type="text/javascript" src="lib/pie.js"></script> </head> <body></body> </html>

pie.js `

 //Width and height 
     var w = 300; 
     var h = 300; 

     var dataset = [ 5, 10, 20, 45, 6, 25 ]; 

     var outerRadius = w/2; 
     var innerRadius = 0; 
     var arc = d3.svg.arc() 
         .innerRadius(innerRadius) 
         .outerRadius(outerRadius); 

     var pie = d3.layout.pie(); 

     //Easy colors accessible via a 10-step ordinal scale 
     var color = d3.scale.category10(); 

     //Create SVG element 
     var svg = d3.select("body") 
        .append("svg") 
        .attr("width", w) 
        .attr("height", h); 

     //Set up groups 
     var arcs = svg.selectAll("g.arc") 
         .data(pie(dataset)) 
         .enter() 
         .append("g") 
         .attr("class", "arc") 
         .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")"); 

     //Draw arc paths 
     arcs.append("path") 
      .attr("fill", function(d, i) { 
       return color(i); 
      }) 
      .attr("d", arc); 

     //Labels 
     arcs.append("text") 
      .attr("transform", function(d) { 
       return "translate(" + arc.centroid(d) + ")"; 
      }) 
      .attr("text-anchor", "middle") 
      .text(function(d) { 
       return d.value; 
      });

目前还不清楚你想要完成什么，你能更具体吗？ – Josh 2014-11-23 03:57:24

@Josh我想说当饼图即将在html上显示时，我可以在HTML中更改其数据集值吗？ – 2014-11-24 01:16:48

答

这是很容易。只需在文件加载之前放置数据集即可。

<script> dataset=[1,2,3,4];</script> <script> your link <script>

答

<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>D3: Pie layout</title> 
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> 
<script>dataset = [1, 2, 3, 4, 5];</script> 
</head> 
<body> 
<script type="text/javascript" src="lib/pie.js"></script> 
</body> 
</html>

和删除var数据= [5，10，20，45，6，25];从文件中。

如何在.js文件中更改d3.js饼图的代码

相关推荐