Question

假设我有二次函数（y = -0.1x ^ 2 + 80），我怎么能在d3中绘制这个函数的图。编辑：更具体一点，我想在两个x坐标（开始和结束）的某个域之间绘制这个图。

不幸的是，我目前没有太多的例子可以分享。我已经看过使用d3.arc，但这似乎不是正确的解决方案，而且我目前正在考虑生成属于该函数路径的许多点的数据，并尝试用路径连接这些点。如果有人以前必须做这样的事情，并且对如何处理这个问题有很好的见解，那将会有所帮助。

我将尝试使用我的一些失败的努力添加代码示例。

Answer 1

是的，这很有可能。你甚至可以只使用SVG DOM api和一些辅助函数，但我用D3做了一个小提琴。我最少使用大部分东西，坐标使用2行和函数本身：

https://jsfiddle.net/ibowankenobi/emwhw8fz/3/

//generate points y = ax^2+bx+c
function createPoints(a,b,c,rangeX,step){
    return Array.apply(null,Array((rangeX[1]-rangeX[0])/step|0 + 1))
    .map(function(d,i){
            var x = rangeX[0]+i*step;
            return [x,a * x * x + b * x + c];
    })
}
//points
var points = createPoints(-0.1,0,80,[-30,30],0.5);
//create svg and path
var svg = d3.select("#container").append("svg").attr("viewBox","0 0 200 200");
//coordinates
svg.selectAll(".coordinates").data(d3.range(2))
.enter()
.append("path")
.attr("class","coordinates")
.attr("stroke","black")
.attr("d",function(d,i){
    return i
  ? "M0,100h200"
  : "M100,0v200"
});
//path
svg
.append("g")
.attr("transform","translate(100,100) scale(1,-1)")
.append("path")
.attr("stroke-width","2")
.attr("stroke","black")
.attr("fill","transparent")
.transition()
.delay(250)
.duration(1500)
.call(animate);
//animate
function animate(selection){
    this
  .attrTween("d",function(){
    return function(t){
     return "M"+points.slice(0,Math.max(1,t*points.length|0)).join("L");
    }
  }).each("end",function(){
    d3.select(this)
        .transition()
            .delay(250)
            .duration(1500)
            .call(animate);
  })
}

在D3中绘制遵循二次函数的线

1 个答案: