Dimple js modify scatter shape

Question

Gibt es eine einfache Möglichkeit, die Form der Kreise in einem Streudiagramm mit dimple.js zu ändern?

Ich möchte verschiedene Formen für jede Farbe in diesem scatter plot. Zum Beispiel, Rechtecke für Blau, Dreiecke für Rot, Klammern für Gelb ...

Wie kann ich das tun?

Answer 1

Sie können es tun, indem Sie eine benutzerdefinierte Plot-Funktion zu schreiben.

Wenn Sie bestimmte Funktionen nicht beachten (z. B. Tooltips, Animationen, wiederholte Zeichen usw.), können Sie sie ausschneiden und den Code auf etwas sehr Minimales reduzieren. Hier ist der einfachste Plotter zum Zeichnen eines Sterns.

var myCustomPlotter = { 
    stacked: false, 
    grouped: false, 
    supportedAxes: ["x", "y"], 
    draw: function (chart, series, duration) { 
    chart._group 
     .selectAll(".my-series") 
     .data(series._positionData) 
     .enter() 
     .append("path") 
    // Path Generated at http://www.smiffysplace.com/stars.html 
     .attr("d", "M 0 10 L 11.756 16.180 L 9.511 3.090 L 19.021 -6.180 L 5.878 -8.090 L 0 -20 L -5.878 -8.090 L -19.021 -6.180 L -9.511 3.090 L -11.756 16.180 L 0 10") 
     .attr("transform", function (d) { 
     return "translate(" + 
     dimple._helpers.cx(d, chart, series) + "," + 
     dimple._helpers.cy(d, chart, series) + ")"; 
    }) 
     .style("fill", "yellow") 
     .style("stroke", "orange"); 
    } 
}; 

http://jsbin.com/mafegu/6/edit?js,output

Nachdem Sie das Hinzufügen beginnen Tooltips etc es komplizierter, aber Sie können das Original Bubble-Methode als Basis und arbeiten von dort verwenden:

https://github.com/PMSI-AlignAlytics/dimple/blob/master/src/objects/plot/bubble.js