d3js svg капелька воды или слеза

Моя цель - нарисовать одну каплю воды с d3js.d3js svg капелька воды или слеза

EDIT: Другой пример здесь предлагает правильную форму: http://bl.ocks.org/mbostock/1020902, но играет с кодом.

Они используют плагин superformula для d3 на github here, который выглядит как еще один хороший толчок.

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

Используя математику, чтобы рисовать фигуры с SVG & d3 делает все возможное, см this example, от Mike Босток (Твиттера логотип):

<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 капелька воды или слеза

ответ

Смежные вопросы