凹坑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