d3js svg 물방울 또는 눈물

내 목표는 d3js로 단일 물방울을 그립니다.d3js svg 물방울 또는 눈물

편집 : 여기에 또 다른 예 : 올바른 모양을 제공 : http://bl.ocks.org/mbostock/1020902,하지만 코드와 함께 연주.

그들은 github here에 d3 용 superformula 플러그인을 사용합니다.이 플러그인은 또 다른 좋은 동작 인 것 같습니다. SVG & D3와 모양을 그릴 수학을 사용

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

마이크 Bostock (트위터 로고)에서 가능 아무것도, 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>

마찬가지로, 이안 존슨은 여기 various shapes를 만듭니다

나의 목표는 1 개의 간단한 눈물 방울 모양을 만드는 것이다. 물방울이나 눈물 방울처럼 보이는 것이 있으면 나를 시작할 수 있습니다. 감사합니다!

출처

2014-11-17 DeBraid

왜 당신은 식을 생성해야합니까? 벡터 편집 도구에서 svg 경로를 그릴 수 있습니다. – Biovisualize

많은 물방울이있을 것입니다. 직사각형이 물 방울로 대체되는 전형적인 히트 맵을 상상해보십시오. – DeBraid

난 그냥 간단한 경로를 사용하여 변환과의 크기와 위치를 바꿀 것 :

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>

출처

2014-11-17 21:34:05 Biovisualize

여기에 'sqrt'척도가 필요하며 데이터의 선형 표현이 필요하지 않습니다. – nrabinowitz

d3js svg 물방울 또는 눈물

답변

관련 문제