Question

我有一个抛物线和他的衍生线在某一点上，我想绘制他的线近似值。所有数据（点）都与数组一致。但我不知道如何使用循环绘制所有这些近似值。我只获得最后的近似值（在数组中）这是代码：

var x = d3.range(-4., 4.1, 0.1)
var m = d3.range(2.5, 3.1, 0.1)

myfunction = x => -Math.pow(x, 2) + 2 * x
myderiv = x => -2 * x + 2
mytangent = x => -4 * x + 9
myslope = x => (-Math.pow(x, 2) + 2 * x + 3) / (x - 3)
mylim = (x, m) => myslope(m) * x - 3 * myslope(m) - 3

var y = new Array()
var y1 = new Array()
var y2 = new Array()
var y3 = new Array()

for (var i = 0 ; i < x.length ; i++) {
    y[i] = myfunction(x[i])
    y1[i] = myderiv(x[i])
    y2[i] = mytangent(x[i])
    for (var j = 0 ; j < m.length ; j++)
        y3[i] = mylim(x[i], m[j])
}
var dataset = []
for (var j = 0; j < x.length; j++) {
    dataset[j] = []
    dataset[j][0] = x[j]
    dataset[j][1] = y[j]
}
var dataset1 = []
for (var j = 0; j < x.length; j++) {
    dataset1[j] = []
    dataset1[j][0] = x[j]
    dataset1[j][1] = y1[j]
}
var dataset2 = []
for (var j = 0; j < x.length; j++) {
    dataset2[j] = []
    dataset2[j][0] = x[j]
    dataset2[j][1] = y2[j]
}
var dataset3 = []
for (var j = 0; j < x.length; j++) {
    dataset3[j] = []
    dataset3[j][0] = x[j]
    dataset3[j][1] = y3[j]
}
console.log(dataset3)
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])

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

function mycanvas() {
    var svg = d3.select('.myfunction')
            .append('svg')
            .attr('width', w)
            .attr('height', h)
    svg.append('rect')
        .attr('width', '100%')
        .attr('height', '100%')
        .style('fill', '#ffcc99')

    // 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)

    // Define and plotting the function
    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', 'blue')
    .attr('fill', 'none')
    svg.append('path')
    .attr('d', line(dataset2))
    .attr('stroke', 'green')
    .attr('fill', 'none')
    svg.append('path')
    .attr('d', line(dataset3))
    .attr('stroke', 'red')
    .attr('fill', 'none')
}

function main() {
    mycanvas()
}

window.onload = main

每一行必须取决于“m”勇气

Answer 1

这个答案对你有帮助吗？

您可以创建一个返回不同功能的功能（线路生成器）每个数据列：

https://stackoverflow.com/a/40555785/343261

如何在D3中使用循环绘制许多函数？

1 个答案: