Линейная диаграмма, основанная на формуле

Question

Возможно ли сделать многолинейную линейную диаграмму d3 на основе формулы вместо данных?

E.g. формула может быть

Y = aX + bZ + cW

В идеале я бы связать a, b и c в выпадающем меню, так что можно манипулировать данные с меню. Но проблема для меня заключается в построении диаграммы на основе формулы вместо данных.

Answer 1

Используйте раскрывающийся список, чтобы создать свои данные.

Скажите, что вы хотите создать f(x) = sin(a * sin(b * sin(c * sin(x)))). Добавьте три ползунки на страницу и нарисовать диаграмму на основе их значений:

// Grab slider values 
var a = document.querySelector('#a').value; 
var b = document.querySelector('#b').value; 
var c = document.querySelector('#c').value; 

// Construct data from a, b, c 
var data = d3.range(-10, 10, 0.01).map(function(v) { 
    return { 
     x: v, 
     y: sin(a * sin(b * sin(c * sin(v)))) 
    }; 
}); 

// JOIN 
var paths = svg.selectAll('path.line') 
    .data([data]); 

// ENTER 
paths.enter().append('path') 
    .attr('class', 'line') 
// ENTER + UPDATE 
    .merge(paths) 
    .transition() 
    .duration(500) 
    .attr('d', line); 

Вот три-слайдер графике: https://bl.ocks.org/gabrielflorit/14435cead80c690105ebbbc35b75796f с GIF (из-за чего нет).