javascript - d3js svg水滴或泪珠

我的目标是用d3js绘制单个水滴。

编辑：这里的另一个示例提供了正确的形状：
http://bl.ocks.org/mbostock/1020902，但使用代码。

他们在github here上的d3上使用了superformula插件，这似乎是另一个不错的选择。

var _superformulaTypes = {
    drop: {m: 1, n1: .5, n2: .5, n3: .5, a: 1, b: 1}
  };

使用数学用svg和d3绘制形状使一切成为可能，请参阅Mike Bostock（Twitter徽标）中的this example：

<svg viewBox="328 355 335 276" xmlns="http://www.w3.org/2000/svg">
  <path d="
    M 630, 425
    A 195, 195 0 0 1 331, 600
    A 142, 142 0 0 0 428, 570
    A  70,  70 0 0 1 370, 523
    A  70,  70 0 0 0 401, 521
    A  70,  70 0 0 1 344, 455
    A  70,  70 0 0 0 372, 460
    A  70,  70 0 0 1 354, 370
    A 195, 195 0 0 0 495, 442
    A  67,  67 0 0 1 611, 380
    A 117, 117 0 0 0 654, 363
    A  65,  65 0 0 1 623, 401
    A 117, 117 0 0 0 662, 390
    A  65,  65 0 0 1 630, 425
    Z"
    style="fill:#3BA9EE;"/>
</svg>

同样，伊恩·约翰逊（Ian Johnson）在此处创建various shapes：

我的目标是创建1个简单的泪珠形状。任何看起来像水滴或水滴的东西都会让我入门，谢谢！

最佳答案

我只是使用一个简单的路径并通过转换来更改其大小和位置：

var svg = d3.select('body').append('svg').attr({width: 400, height: 400});

var dropPath = 'M 243.44676,222.01677 C 243.44676,288.9638 189.17548,343.23508 122.22845,343.23508 C 55.281426,343.23508 1.0101458,288.9638 1.0101458,222.01677 C 1.0101458,155.06975 40.150976,142.95572 122.22845,0.79337431 C 203.60619,141.74374 243.44676,155.06975 243.44676,222.01677 z';

var data = d3.range(300).map(function(){ return Math.random()/3; });

svg.selectAll('g.drop').data(data)
 .enter().append('g')
 .attr({
  'class': 'drop',
  transform: function(d, i){
   return 'translate('+[Math.random()*300, Math.random()*300]+') scale('+d+')';
  }
 })
 .append('path').attr({d: dropPath})

svg g.drop path{
  stroke: blue;
  stroke-width': 3px;
  fill: skyblue;
  fill-opacity: 0.3;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>