Implement new trace/plot

plotly.js
1

Hi,
for a Masterproject i want to implement some new plots (or traces) in plotly.js (Voronoi Treemap, Sunburst et cetera).

To begin with something i created a new minimal trace named “scalarempty” that will plot, as soon it works, an static image inside the graph area, which can be zoomed. This failed.

For this i have done the following:

  • lib/index-cartesian.js → add require(‘./scalarempty’);
  • lib/index.js → add require(‘./scalarempty’);
  • lib/scalarempty.js added: module.exports = require(‘…/src/traces/scalarempty’);
  • In traces/scalarempty:
  • added calc.js (empty function)
  • added attirbutes.js (content: module.exports = {}:wink:
  • added defaults.js (empty function)
  • added Index.js:

//index.js content:
‘use strict’;
var scalarempty = {};
scalarempty.attributes = require(‘./attributes’);
scalarempty.supplyDefaults = require(‘./defaults’);
scalarempty.calc = require(‘./calc’);
scalarempty.plot = require(‘./plot’);
scalarempty.moduleType = ‘trace’;
scalarempty.name = ‘scalarempty’;
scalarempty.basePlotModule = require(‘…/…/plots/cartesian’);
scalarempty.categories = [‘cartesian’, ‘symbols’];
scalarempty.meta = {
description: [
‘Not descripted yet.’
].join(’ ')
};
module.exports = scalarempty;

  • added plot.js:

content of scalarempty/plot.js
module.exports = function plot(gd, plotinfo, cdscatter, transitionOpts, makeOnCompleteCallback) {
}

With this i managed to trigger a breakpoint in scalarempty/plot.js in a testplot.
I tried to add the following to plot.js:

var scatterlayer = plotinfo.plot.select('g.scatterlayer');

scatterlayer.selectAll(‘g.trace’).each(function(d, i) {
d.append(“svg:image”)
.attr(“xlink:href”, “C:/Repos/plotly.js/Cat.png”)
.attr(“width”, 30)
.attr(“height”, 30)
.attr(“x”, 10)
.attr(“y”, 10)
.attr(“preserveAspectRatio”,“none”);

This does not work because the function in each is never entered.
At this point i am overwhelmed by the complexity of the sourcecode “example” traces “bar” and “scatter”.

I would appreciate any tipps how to generate a new minimal trace. Is there any sourcecode documentation i did not found?
I hope this is the right spot to ask.
Thanks :slight_smile:

2

module.exports = function plot(gd, plotinfo, cdscatter, transitionOpts, makeOnCompleteCallback) {

var x_org = 10;
var y_org = 10;
var xs_org = 10;
var ys_org = 10;

var x = plotinfo.xaxis.c2p(x_org);
var y = plotinfo.yaxis.c2p(y_org);
var xend = plotinfo.xaxis.c2p(x_org + xs_org);
var yend = plotinfo.yaxis.c2p(y_org + ys_org);

var xs = Math.abs(xend-x);
var ys = Math.abs(yend-y);

//empty old stuff
plotinfo.plot.select(‘.scatterlayer’).each(function(index, value) {plotinfo.plot.select(‘.scatterlayer’)[index][“0”].innerHTML = “”});
//create new
plotinfo.plot.select(‘.scatterlayer’).append(“svg:image”)
.attr(“xlink:href”, “F:/plotly/Hut.png”)
.attr(“width”, xs)
.attr(“height”, ys)
.attr(“x”, x)
.attr(“y”, y)
.attr(“preserveAspectRatio”,“none”);
};

This works. It looks like c2p converts the coordinate systems and the html structure does not empty itself each redraw.

3

Would you mind sharing your development on sunburst representation? Cheers, Matthieu