javascript - Dimple js修改散点形状

Question

有没有一种简单的方法可以使用 dimple.js 修改散点图中圆圈的形状？

我想要这个 scatter plot 中每种颜色的不同形状.例如，蓝色的矩形，红色的三 Angular 形，黄色的括号......

我该怎么做？

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