Adobe Animate - insert d3.js

New Here ,
Jul 14, 2021 Jul 14, 2021

Copy link to clipboard

Copied

We have a script for graphics that is in d3.js and that needs to be inserted in the page created by Adobe Animate. As Adobe Animate generates a file in html5 Canvas and d3js works with SVG, is there a way to insert it in Canvas,  and also keeping the mouse click and toolltip control in mousehover?

Views

88

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 15, 2021 Jul 15, 2021

Copy link to clipboard

Copied

Have you tried including it in a custom HTML Template (in publish settings) or including it via the Action panel? 

JosephLabrecque_0-1626378986211.jpeg

 

Hope one of these suggestions will work.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 21, 2021 Jul 21, 2021

Copy link to clipboard

Copied

Question 1: I included the d3.js script via actions panel, but the script needs to access an external library that it is in the link attached. How to make the included script access an external library?

https://d3js.org/d3.v4.min.js 

 
Question 2: the d3.js script creates a graphic...how can I configure/set the position of this graphic in the canvas? I draw a rectangle but when the script is included via actions panel I don´t know is it is included in a specific frame or objetc/symbol? How to set the area/position where the graphic generated by the script will be included?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 21, 2021 Jul 21, 2021

Copy link to clipboard

Copied

LATEST

this a script code you could use to test:


var svg = d3.select("s_d3js")
svg.append("circle")
.attr("cx", 2).attr("cy", 2).attr("r", 40).style("fill", "blue");
svg.append("circle")
.attr("cx", 140).attr("cy", 70).attr("r", 40).style("fill", "red");
svg.append("circle")
.attr("cx", 300).attr("cy", 100).attr("r", 40).style("fill", "green");

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines