Black Lives Matter. Please consider donating to Black Girls Code today.

Implement new trace/plot

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:

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.

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