I want to build a visualization in D3.js that illustrates the concept of potential energy and kinetic energy for my students. In essence, I want the students to be able to drag a skier up a slope (i.e. a Line) and when they drop him, he transits down again. I’m sure it is an easy task in D3 but I’m
Tag: svg
d3js mask to show dots over bar chart
i saw this example here: https://jsfiddle.net/gruc1vod/4/ and i want to add these dots over my bar chart using mask. Here is my JavaScript code: Here is my CSS code: and here my live example: https://jsfiddle.net/uao5yfhm/6/ Where is the problem and i cannot see this outcome correct outcome but i see this one wrong outcome? Answer Solution: just change the circle
D3 / Canvas: Axis not displayed
i have the following issue: I want to create a simple chart using the d3 library and the canvas rendering. I don’t see anything in my browser – but, if I inspect the element, the Axis is ‘compiled’ in the code and I can hover over every tick in the code while the position in the DOM is marked. But,
How to incorporate D3 svg elements into mithril.js?
I have been working with a framework using mithril.js and wish to add this script that draws an interactive tree into a component on my website. So far, I just placed the JS code inside the script tags into my application, and I know that normally, the DOM object generated is obtained by calling svg.node(). But I know I can’t
How to change CSS class to an children inside a SVG?
I am making and animation the objetive is change the xlink:href inside a SVG. (this is for change a shape), and change class respect to their position inside. This is my SVG The class in every rectelement, has a different animation-delay according to position (first execute at 0s, second at 2s, third at 4s and so on). With JS I
Catch the click event on class inside SVG in Angular
In my Angular 9 app I need to add the svg file as an interactive image. The svg itself is in my-file.svg and looks like this: I have a component: And in the car-view.component.html I include this svg as: How can I call the elementClicked() function inside CarViewComponent on click event on my-polygon-class (which is inside the svg)? I also
Anime.js – pause between loop iterations
I have this animation: I want to make a pause between animation loops: so when brush returns to the final point, it will stay here a bit before new movement starting. But I have no idea how to fix animation (timings, maybe?) properly to achieve it. Thank you in advance! Answer Ok, finally I got it. In arrayed keyframes in
Change SVG path color using data in JavaScript function
I have a question that builds on similar ones like How to change SVG’s path color? and Changing SVG image color with javascript: I see how to change an SVG by color: But I’d like to use a vector of key value pairs where the key is the classname and the value will dictate the color to fill. Right now
How to import multiple svgs in vue.js via vue-svg-loader
I want to import multiple svg’s in one vue component. The documentation says I Have to import each one of them, but how can I import multiple svgs in a much shorter and cleaner way? vue-svg-loader documentation: https://vue-svg-loader.js.org/ What happens if I got over one hundred svg’s I want to import? Any ideas to solve this? Answer Create a base
How can I use snap.svg with external files?
I know I can use an inline <svg> element to load snap svg. However I would like to use an non-inlined file via an <img> element: Where someGroup is an svg g element, fails. group is null. Additionally: Shows this is an Element rather than a Snap instance. How can I use snap.svg with external files? Answer Use the Paper.image