CODEWITHSUNDEEP
javascripthtmld3.js
AliShahVis
AliShahVis

Reputation: 141

How to make a semi-circle in d3?

.jonsIdea {
background-color: white;
}
    <div class="jonsIdea">
        <div class="canvas">
            <svg width="90vw" height="100vh">
                <text text-anchor="middle" x="50vw" y="5vh" font-family="MarsBook" font-size="2vw" fill="black">
                    Please select your businesses
                </text>
                <circle r='7vw' cx='50vw' cy='50vh'></circle>
            </svg>
        </div>
    </div>

I've been searching online but I have not been able to find an example of a simple semi circle using d3.js.

As you can I see I have a circle appended to the middle of the page. What I am aiming to do is have two buttons inside the circle that present as semi-circles that users can click. It would be great if they were on top of each other, as opposed to next to eachother.

Does anyone have the code to draw a semi-circle?

Thanks in advance

Upvotes: 3

Views: 3331

Answers (2)

Gerardo Furtado
Gerardo Furtado

Reputation: 102174

I'd say that the idiomatic D3 for creating a semicircle is appending a <path> and setting the semicircle structure in the arc generator (d3.arc()), where the difference between starting angle and ending angle is Math.PI.

const svg = d3.select("svg");

const arcGenerator = d3.arc()
  .outerRadius(100)
  .innerRadius(0)
  .startAngle(-Math.PI / 2)
  .endAngle(Math.PI / 2);

const arc = svg.append("path")
  .attr("transform", "translate(150,120)")
  .attr("d", arcGenerator());
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>

Upvotes: 7

Tigger
Tigger

Reputation: 9120

The following is a copy and paste from the Clipping and masking topic on MDN.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <clipPath id="cut-off-bottom">
      <rect x="0" y="0" width="200" height="100" />
    </clipPath>
  </defs>
  <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" />
</svg>

Upvotes: 1

Related Questions