0

I'm trying to append a svg and arc in it to html page. This is how I tried to do this:

<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>

But for some reason there is an svg element in div with only element in it. What's wrong? P.S. I use this tutorial

8
  • It looks like you're trying to do a pie chart. This example may help. Apr 10, 2014 at 13:08
  • I'm trying to do donut chart. Apr 10, 2014 at 13:22
  • And here is a donut chart. Apr 10, 2014 at 13:25
  • I used this example but decided to use video tutroial instead. Apr 10, 2014 at 13:26
  • 1
    You have a typo there (starAngle). Also the transform needs to be an attribute, not an element. See jsfiddle.net/C3REX Apr 10, 2014 at 13:38

1 Answer 1

1

The main problem is a simple typo -- starAngle instead of startAngle. Also, transform should be an attribute, not an element.

Working demo here.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.