Animating the starting angle of an arc using d3.js

I'm looking to animate the starting angle of an arc using D3.js.

If anyone has any tips or helpful links, I would greatly appreciate it!

Here's what I've already attempted:

http://jsfiddle.net/87e3d4tj/

d3.select('#my-path').datum({
      startAngle: endAngle,
      endAngle: ( 90 * (Math.PI/180) )
    })
    .transition()
    .duration(duration)
    .attrTween('d', d => {
      var interpolate = d3.interpolate(d.startAngle, d.endAngle);
      return function(t) {
        d.endAngle = endAngle;
        d.startAngle = interpolate(t);
        return arc(d);
      };
    });
javascriptcssanimationsvgtween

Answer №1

I attempted the following code and I hope it meets your requirements.

https://jsfiddle.net/debasish007/eu7xo4mL/

const width = 400,
    height = 400,
    τ = (Math.PI/180);
const arc = d3.arc()
    .innerRadius(130)
    .outerRadius(150);

const svg = d3.select("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")


const foreground = svg.append("path")
    .datum({
        endAngle: 90 * τ,
        startAngle: -90 * τ
    })
    .style("fill", "blue")
    .attr("d", arc);

setTimeout(function () {
    foreground.transition()
        .duration(750)
        .call(arcTween, -30 * τ, 90 * τ);
}, 1500);

function arcTween(transition, newStartAngle, newFinishAngle) {

    transition.attrTween("d", function (d) {
        const interpolateStart = d3.interpolate(d.startAngle, newStartAngle);
        return function (t) {
            d.endAngle = newFinishAngle;
            d.startAngle = interpolateStart(t);
            return arc(d);
        };
    });
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: Unable to register both views with identical name RNDateTimePicker due to Invariant Violation

Encountering an issue while attempting to import: import DropDownPicker from 'react-native-dropdown-picker'; import DateTimePicker from '@react-native-community/datetimepicker'; <DropDownPicker zIndex={5000} ...

javascriptreact-nativenpmexporeact-native-picker

Save a JSON dataset within a variable while implementing a proxy design pattern

Can anyone help me with this code snippet? var my = {}; (function () { var self = this; this.sampleData = { }; this.loadData = function() { $.getJSON('http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?', ...

javascriptjqueryajax

The property 'type' is not found on the 'IntrinsicAttributes & DraggableProps' type in NEXTJS/React

Utilizing @hello-pangea/dnd (a fork of react-beautiful-dnd) to construct a drag and drop list. <Draggable draggableId={section.id} index={index} type="section"> //type <- new/ custom prop However, the 'type' does not exist in ...

javascriptreactjsgithubnext.jsreact-props

What are some creative ways to design the selected tab?

In my Vue parent component, I have multiple child components. There are several elements that toggle between components by updating the current data. The issue is that I am unsure how to indicate which tab is currently active. I've tried various li ...

javascripthtmlcssvue.js

Implementing JSON methods in C# WebService to enable communication with external servers

Is it possible to integrate an asp.net web service written in C# into an HTML5/JavaScript website? The challenge is that the web service and client are located on different domains, requiring a cross-domain request. ...

c#javascriptjsonweb-servicescross-domain

svg contained within a resizable div

I am trying to insert an svg into the .container div that I created using this code snippet. The goal is to make the svg fit perfectly within the dimensions of the .container div, while also scaling proportionally with the page as it is resized: <html& ...

htmlcsssvg

If a single checkbox is selected within a group, then every other checkbox should be deactivated and deselected

Here is the code snippet provided: function listen(element, event, callback) { if (element.attachEvent) { element.attachEvent('on' + event, callback); } else { element.addEventListener(event, callback); } } var form = document.que ...

javascriptjqueryhtmlcheckbox

Method for creating a randomized layout grid in MaterialUI where each row contains a total of three columns

In the process of developing a React application that interacts with the reddit api and oAuth. Utilizing MaterialUI, I am currently experimenting with the Component to create a 3 column grid of images with dynamically generated column widths, maxing out a ...

javascriptmaterial-ui

Retrieve a list of orders from Woocommerce's REST API specifically for the current date

Utilizing the WooCommerce REST API, I am developing a Vue dashboard where I am aiming to display today's orders and this month's orders as a feature. I am aware that WooCommerce provides date filters such as after and before. However, I need to ...

javascriptphpvue.jswoocommerce

Comparing ng-transclude usage: element or attribute styling

Creating a wrapper directive to frame a notification widget within a list is my goal. I plan to transclude specific content based on a property from the 'notif' object into this frame. Currently, I have hardcoded a 'div' element. The i ...

javascriptangularjsangularjs-directivetransclusionangularjs-ng-transclude

Tips for aligning an image vertically within a list item

I am having trouble aligning my image vertically in the li tag. This is what I currently have: <nav id='tabs-wrapper'> <ul id='tabs'> <li><a href='index.html'><img id='btn' src=&apo ...

htmlcss

What is the best way to ensure that this encompassing div adjusts its width to match that of its child elements?

My goal is to keep fave_hold at 100% of its parent div, while limiting the width of .faves to fit its child elements. These elements are generated dynamically with predefined widths. Below is the code snippet in React/JSX format: <div id='fave_h ...

javascripthtmlcssreactjs

Searching for paired values within an array using Javascript or Jquery

In my JavaScript code, I am working with an array called ppts that looks like: var ppts = []; //... ppts.push({x: mouse.x, y: mouse.y}); //... var tmpArr = []; for (var i=1;ppts.length-1; i++) tmpArr.push(ppts[i].x); alert(tmpArr[2]); tmp_ctx.lineTo(pars ...

javascriptjqueryarraysfind

Is it possible to turn off the fallback color for bourbon radial gradients?

Is there a way to prevent the fallback from being applied when using the radial gradient mixin in Bourbon? I've consulted the documentation at , which states that the fallback is optional. However, no matter what I attempt, it seems that the primary ...

csssassmixinsfallbackbourbon

Implementing Pagination or Infinite Scroll to Instagram Feed

Currently, I am working on creating an Instagram feed for a fashion campaign where users can hashtag their photos with a specific tag. Using the Instagram API, the script will pull all recent posts with this common tag to display on the webpage. Instagram ...

javascripthtmlajaxpaginationinstagram

Difficulty encountered while using React.js map function to access specific JSON data

I'm encountering an issue where I am unable to read data from a JSON file. After checking that the data is stored in the component state and logging it to the console once the component is mounted, I attempted to render the URL string from the JSON da ...

javascriptjsonajaxreactjsdictionary

Restrict the number of clicks allowed on a button

I am working on a project for my college where I need to restrict the number of times a button can be clicked to only 3 times. I have searched everywhere for code to achieve this and finally found some yesterday. The code is functioning partially as it giv ...

javascripthtml

Encountering issues with the functionality of async await

I am a beginner when it comes to utilizing the async, await, and promise features in JavaScript. My current focus is on: async function sendTextMessage(text) { console.log("----1----"); var messageData = { message: { text: tex ...

javascriptnode.jsasynchronouspromisees6-promise

Is there a way to retrieve JSON data from a child component and pass it to a parent component in Vue.js?

I have data from the results stored in a child component that needs to be passed to the main component. The Main Component is the parent, so whenever I click the button, the results should be collected in the main app <button @click="showFinalResu ...

javascriptvue.js

Tab buttons that switch between different sections with just a click

Forgive me if this seems like a simple coding issue, but I struggle with javascript and need some guidance... I have a setup where two buttons (blue and yellow) toggle between different content divs. On another part of the page, there are also two buttons ...

javascriptjquery