Плоская нормальная функция плотности с d3 js

Question

Я пытаюсь построить эту непрерывную функцию с D3 js версии 4, но у меня много проблем с массивами. это мой Javascript код:

var x = d3.range(-4., 4.1, 0.1) 
 
var fnorm = x => (1./Math.sqrt(2 * Math.PI)) * Math.exp(-0.5 * Math.pow(x, 2)) 
 
var y = new Array() 
 
for (var i = 0 ; i < x.length ; i++) { 
 
    y[i] = fnorm(x[i]) 
 
} 
 

 
var dataset = [] 
 
for (var j = 0; j < x.length; j++) { 
 
    dataset[j] = [] 
 
    dataset[j][0] = x[j] 
 
    dataset[j][1] = y[j] 
 
} 
 
console.log(dataset[0]) 
 
console.log(dataset[1]) 
 
var w = 500 
 
var h = 500 
 
var padding = 50 
 

 
var xScale = d3.scaleLinear() 
 
       .domain([d3.min(x, function(d) { return d }), d3.max(x, function(d) { return d })]) 
 
       .range([padding, w - padding * 2]) 
 

 
var yScale = d3.scaleLinear() 
 
      .domain([0, 0.4]) 
 
      .range([h - padding, padding]) 
 

 
function mycanvas() { 
 
    var svg = d3.select('body') 
 
      .append('svg') 
 
      .attr('width', w) 
 
      .attr('height', h) 
 
    svg.append('rect') 
 
     .attr('width', '100%') 
 
     .attr('height', '100%') 
 
     .attr('fill', 'blue') 
 
    // Define the axis 
 
    var xAxis = d3.axisBottom().scale(xScale).ticks(9) 
 
    var yAxis = d3.axisLeft().scale(yScale).ticks(9) 
 
    // Create the axis 
 
    svg.append('g') 
 
     .attr('class', 'axis') 
 
     .attr('transform', 'translate(0,' + (h - padding) + ')') 
 
     .call(xAxis) 
 
    svg.append('g') 
 
     .attr('class', 'axis') 
 
     .attr('transform', 'translate(' + padding + ',0)') 
 
     .call(yAxis) 
 

 
    svg.selectAll('line') 
 
     .data(dataset) 
 
     .enter() 
 
     .append('line') 
 
     .attr('x1', function(d) { 
 
      return xScale(d[0]) 
 
     }) 
 
     .attr('y1', function(d) { 
 
      return yScale(d[1]) 
 
     }) 
 
     .attr('x2', function(d) { 
 
      return xScale(d[1]) 
 
     }) 
 
     .attr('y2', function(d) { 
 
      return yScale(d[0]) 
 
     }) 
 
     .attr('stroke', 'white') 
 
} 
 

 
function main() { 
 
    mycanvas() 
 
} 
 

 
window.onload = main

<script src="https://d3js.org/d3.v4.min.js"></script>

Основная проблема, когда я пытаюсь построить на СВГ линии я не знаю, как исправить правильный путь для вызова и применить набор данных массив с x1 , y1, x2, y2

Answer 1

Вы можете использовать d3.line для получения пути из набора данных:

var line = d3.line() 
      .x(function(d) { return xScale(d[0]);}) 
      .y(function(d) { return yScale(d[1]);}); 

svg.append("path") 
    .attr("d", line(dataset)) 
    .attr("stroke", "white") 
    .attr("fill", "none"); 

Demo: https://jsfiddle.net/LukaszWiktor/kkxe5sbc/