在d3.js中向svg元素附加和弧线

Question

我正在尝试将svg和arc附加到html页面。 这就是我尝试执行的操作：

<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元素。 怎么了？ PS我使用本教程

Answer 1

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

在这里工作演示。