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元素，其中只包含元素。怎么了？附：我使用this tutorial

Answer 1

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

工作演示here。

在d3.js中追加和弧到svg元素

1 个答案: