d3js - Create a server side SVG with javascript actions

Question

I'm trying to enable javascript code to be invoked on an action bounded to an SVG element created in NodeJS using d3@3. Unfortunately, the on('click') is not rendered.

router.get('/test', function(req, res) {
    const dom = new JSDOM();
    var svg = d3.select(dom.window.document.body)
        .append("svg")
        .attr("xmlns", "http://www.w3.org/2000/svg")

    svg.insert('rect') 
        .attr("width", 200)
        .attr("height", 200)
        .on('click', function() { console.log('click')});

    svgStr = dom.window.document.body.innerHTML;
    res.set('Content-Type', 'image/svg+xml');
    res.send(svgStr);
})

Output:

<svg xmlns="http://www.w3.org/2000/svg"><rect width="200" height="200"> 
</rect></svg>

Where's the on('click') ??

Answer 1

set

`
//...
.attr("height", 200)
.attr("onclick" , "console.log('click')")`

for you click

and remember actions is not allowed from images to page