How can I incorporate a d3.js chart into my jira plugin that uses soy templates?

Jira Development Jira Server
,
1

I currently have a working jira add-on that displays ticket metadata using a soy template. I am trying to incorporate an interactive d3.js chart into this but cannot find a way that works. When adding the d3 code straight into the template within script tags, i can successfully render d3 objects on the dashboard. however, i get errors when trying to access and use my soy params eg $array within my js code. I can access and display these params within the template and outwith the script tags without issue though.

this code shows a working template that displays d3 objects within js code within the template, and my ticket metadata outside of the js code.

{template .Chart}
    <div id = "container">
        <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.3/d3.min.js'></script>

        <div class = "svg"></div>

        //correctly renders metadata
        {foreach $issue in $issues}
            <H2>Hello {$issue.key}</H2>
        {/foreach}

        <script type='text/javascript'>
        var title = svg.append("text")
                .text("Chart Title")
                .attr("x", w/2)
                .attr("y", 25)
                .attr("text-anchor", "middle")
                .attr("font-size", 18)
                .attr("fill", "#009FFC");

        // more working d3 code
        </script>
    </div>
{/template}

i have tried using |escapeJs to access the params from within the <script section but haven’t been able to get this to work.

i have also tried to link to the d3 code from an external js file, but i haven’t managed to get this to work either.