用d3引擎将数学函数绘制成图形_d3 画函数-优快云博客

本文链接：https://blog.youkuaiyun.com/wildwind79/article/details/51350890

本文介绍如何使用D3.js引擎将数学函数绘制成图形。通过定义尺度、轴及SVG元素，实现了数学函数y=x^2的可视化，并展示了完整的HTML代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用d3引擎将数学函数绘制成图形。

<html>
<head>
<script src="./d3.js" charset="utf-8"></script>
<style>
.x.axis{
    stroke-width:1;
}
.line {
  fill: none;
  stroke: red;
  stroke-width: 1px;
}
.x.axis line,
.x.axis path {
  fill: none;
  stroke: #000;
}
.y.axis line,
.y.axis path {
  fill: none;
  stroke: #000;
}
</style>
<script>
<!--
document.onreadystatechange = function(){
    if(document.readyState == "complete"){
        var m = {l:80, t:20, b:20, r:20};

        var w = 480, h = 360;
        var sw = w+m.l+m.r, sh = h+m.t+m.b;

        var x = d3.scale.linear().domain([0, 12]).range([0, w]);
        var y = d3.scale.linear().domain([0, 200]).range([h, 0]);
        var xAxis = d3.svg.axis().scale(x).ticks(12);
        var yAxis = d3.svg.axis().scale(y).ticks(4).orient("left");


        var A =1, n =10;

        var polyline = d3.svg.line()
            .x(function(d){return x(d);})
            .y(function(d){
                return Math.round(y(Math.pow(d, 2)));
            });

        var svg = d3.select("body").append("svg")
            .attr("class", "axis")
            .attr("width", sw)
            .attr("height", sh)
            .attr("transform", "translate(0, 0)");
        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate("+m.l+", "+(m.t+h)+")")
            .call(xAxis);
        svg.append("g")
            .attr("class", "y axis")
            .attr("transform", "translate("+m.l+", "+m.t+")")
            .call(yAxis);
        svg.append("path")
            .attr("class", "line")
            .attr("d", polyline(x.ticks(12)))
            .attr("transform", "translate("+m.l+", "+(m.t)+")");
    }
}
//-->
</script>
</head>
<body>
</body>
</html>