基于公式的折线图

Question

是否可以根据公式而不是数据制作d3多线折线图？

例如公式可以

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(因为为什么不呢).