Question

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

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

他们在github here上使用superformula插件用于d3，这看起来像是另一个很好的推动。

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

使用数学用svg＆amp;绘制形状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：

我的目标是创造一个简单的泪珠形状。任何看起来更像水滴或泪滴的东西都会让我开始，谢谢！

Answer 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>

d3js svg水滴或泪珠

1 个答案: