用D3繪製正常密度函數js

我試圖用D3 js版本4繪製這個連續函數，但是我有很多數組問題。這是我的javascript代碼：用D3繪製正常密度函數js

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>

的主要問題是，當我嘗試用SVG線畫出我不知道如何解決正確的方法來調用，並適用於X1集陣列，Y1，X2，Y2

來源

2016-06-30 Tobal

你可以使用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");

演示：https://jsfiddle.net/LukaszWiktor/kkxe5sbc/

來源

2016-07-01 14:44:21

用D3繪製正常密度函數js

回答

相關問題