CODEWITHSUNDEEP
svgd3.js
user3873357
user3873357

Reputation: 3

Vertical arc using D3.js

How do I draw semi-circular arc along the y-axis ( perpendicular axis ) of an svg using D3 ? Here is an image of what I want to achieve target

Here is my code so far :-

var canvas = d3.select("body").append("svg")
           .attr("width",width)
               .attr("height",height);

var group = canvas.append("g")
        .attr("transform","translate(0,200)");

var origin = d3.svg.arc()
           .outerRadius(50)
           .innerRadius(0)
           .startAngle(-1.5755)
           .endAngle(1.5755);

var arcs1 = group.append('g')
         .attr('class','arc')
         .attr("transform","translate(50,0)");

var yAxis = group.append("line")
             .attr("transform","translate(50,0)")
             .attr("x1", 0)
                     .attr("y1", -200)
                     .attr("x2", 0)
                     .attr("y2", height)
                     .attr("stroke-width", 2)
                     .attr("stroke", "black");

Upvotes: 0

Views: 586

Answers (2)

Vinh Tran
Vinh Tran

Reputation: 401

First, to draw the arc like your target you want your startAngle to start at 0 and endAngle to be 3.14 or Math.PI.

var origin = d3.svg.arc()
       .outerRadius(50)
       .innerRadius(0)
       .startAngle(0)
       .endAngle(Math.PI);

Then just append a path to arcs1 and use your origin function to draw it.

arcs1.append("path").attr("d", origin);

You can take a look at a live demo at http://jsfiddle.net/7EfS5/.

Edit To change the color of your arc, you can either use .attr("fill", color) or .style("fill", color)

arcs1.append("path").attr("d", origin)
                    .attr("fill", "red");

Hope this help.

Upvotes: 1

jshanley
jshanley

Reputation: 9128

When you make a d3 arc, an angle of 0 represents the top of a circle. So to make an arc like the one shown in your image, you will want your start angle to be 0 and your end angle to be halfway around a circle, which is Pi radians:

var arc = d3.svg.arc()
  .outerRadius(50)
  .innerRadius(0)
  .startAngle(0)
  .endAngle(Math.PI);

As far as positioning your arc, you can use an svg transform to translate the origin of the arc to the position you want. For instance, if your y-axis has height h you can translate the origin to the center of the axis when you create the path element for your arc like this:

svg.append('path')
  .attr('transform', 'translate(0,' + h/2 + ')')
  .attr('d', arc);

HERE is a demo.

Upvotes: 0

Related Questions