基于公式

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（因为为什么不呢）。