수식을 기반으로 한 꺾은 선형 차트

Question

데이터 대신 수식을 기반으로 d3 다중 선 꺾은 선형 차트를 만들 수 있습니까?

예. 화학식 I은이 메뉴에 대한 데이터를 조작 할 수 있도록

Y = aX + bZ + cW

이상적 I는 드롭 다운 메뉴에 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와 (때문에 왜 안).