Combine dot-size and dot-color for graph3d

[jakobjungfels]

Hi, is it possible to combine dot-size and dot-color for graph3d? I am recreating a desktop app that looks like this for the web. In the desktop app I combine five values (x,y,z,size,color) and I would like to do this with graph3d as well. If it is not possible right now, it would be awesome as a new feature. Alternatively, if someone can give me a quick run down which parts of the code play a role in this, I would try and change it myself. Kind regards

[yves84]

I'm using Graph3d to visual a skeleton, tracked by a MS Kinect2. I use the colors of a dot to show the tracking state of this point (green tracked / red not tracked).

Line 35973:

Graph3d.prototype._getColorsRegular = function (point) {
  // if the color field is present as hex....
  if (point.point.data.color !== undefined) {
      var rgb = this._hex2rgb(point.point.data.color);
      var color = "RGB(" + rgb["r"] + "," + rgb["g"] + "," + rgb["b"] + ")";
      rgb = this._hex2rgb(point.point.data.color);
      var borderColor = "RGB(" + rgb["r"] + "," + rgb["g"] + "," + rgb["b"] + ")";
  } else {
    // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
    var hue = (1 - (point.point.z - this.zRange.min) * this.scale.z / this.verticalRatio) * 240;
    var color = this._hsv2rgb(hue, 1, 1);
    var borderColor = this._hsv2rgb(hue, 1, 0.8);
  }

  return {
    fill: color,
    border: borderColor
  };
};

// copyed from the top of the file (see exports.hexToRGB)
Graph3d.prototype._hex2rgb = function (hex) {
  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function (m, r, g, b) {
    return r + r + g + g + b + b;
  });
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
};

Now i can do something like this:

data = new vis.DataSet();
data.add({
                        x: 1,
                        y: 2,
                        z: 3,
                        color: "#00ff00"
});

... to set the color for each dot. It should be Independent from the "style". Sorry i not a JS pro programmer but it works for me. maybe it helps...

[jakobjungfels]

Thank you for your suggestion, I will try it out.