Dimple js изменить форму разброса

Question

Есть ли простой способ изменить форму кругов в области разброса с использованием dimple.js?

Я хочу различные формы для каждого цвета в этом scatter plot. Например, прямоугольники для синих, треугольники для красного, скобки для желтых ...

Как это сделать?

Answer 1

Вы можете сделать это, написав функцию пользовательского участка.

Если вам не нужны определенные функции (например, подсказки, анимация, повторные розыгрыши и т. Д.), Вы можете вырезать их, и это уменьшит код до чего-то очень минимального. Вот самый основной плоттер для рисования звезды.

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

После того, как вы начнете добавлять всплывающие подсказки и т.д. он будет получать более сложным, но вы можете использовать оригинальный метод пузырьковой в качестве основы и работы оттуда:

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