添加和弧到svg元素在d3.js

我想附加一个SVG和弧在它的HTML页面。这是我想做到这一点：添加和弧到svg元素在d3.js

<script> 
var cityNames=["Челябинск","Область","Миасс","Копейск"]; 
var cityPercentage=["50%","30%","20%","10%"]; 
var width=300, 
    height=300, 
    radius=Math.min(width, height)/2; 
var p=Math.PI * 2; 
var cityDivision = d3.select("#cities") 
      .append("svg") 
      .attr("width", width) 
      .attr("height", height) 
      .attr("class","span4 cityDivision"); 
var group=cityDivision.append("g") 
      .append("transform","translate(" + width/2 + "," + height/2 + ")"); 
var arc=d3.svg.arc() 
    .innerRadius(radius-20) 
    .outerRadius(radius) 
    .starAngle(0) 
    .endAngle(p); 
group.append("path") 
    .attr("d",arc); 
</script> 
<div class="container"> 
    <div class="row"> 
     <div id="cities"> 
     </div> 
     <div class="span4" id="amount"> 
      Численность 
     </div> 
     <div class="span4" id="LPU"> 
      ЛПУ 
     </div> 
    </div> 
</div>

但由于某些原因存在DIV与它唯一的元素SVG元素。怎么了？ P.S.我用this tutorial

来源

2014-04-10 Sergey Scopin

看起来你正在试图做一个饼图。 [这个例子]（http://bl.ocks.org/enjalot/1203641）可能会有所帮助。 –

我正在尝试做甜甜圈图表。 –

而[这里]（http://bl.ocks.org/mbostock/3887193）是一个甜甜圈图表。 –

主要问题是简单的错字 - starAngle而不是startAngle。此外，transform应该是一个属性，而不是一个元素。

工作演示here。

来源

2014-04-10 13:54:09

添加和弧到svg元素在d3.js

回答

相关问题