javascript - 如何用D3拟合多项式曲线？-6ren

javascript - 如何用D3拟合多项式曲线？

转载作者：行者123 更新时间：2023-12-01 03:06:07

35

4

我必须遵循index.html中的D3代码:

<!DOCTYPE html>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
    margin = {top: 60, right: 20, bottom: 40, left: 50},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x = d3.scaleLinear()
    .rangeRound([0, width]);

var y = d3.scaleLinear()
    .rangeRound([height, 0]);

var line = d3.line()
    .x(function(d) { return x(d.error); })
    .y(function(d) { return y(d.close); });

d3.tsv("data.tsv", function(d) {
  d.error = d.error;
  d.close = +d.close;
  return d;
}, function(error, data) {
  if (error) throw error;

  x.domain(d3.extent(data, function(d) { return d.error; }));
  y.domain(d3.extent(data, function(d) { return d.close; }));

  g.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x))
      .select(".domain")
      .remove();

  g.append("g")
      .call(d3.axisLeft(y))
      .append("text")
      .attr("fill", "#000")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end")
      .text("Error (%)");

  g.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-linejoin", "round")
      .attr("stroke-linecap", "round")
      .attr("stroke-width", 1.5)
      .attr("d", line);
});

</script>

data.tsv 看起来像这样:

error close
100 93.24
200 -85.35
300 53.89
400 -18.57
500 198.1
600 -8.4
700 98.623
800 9.89
900 118.56
1000  98.71

我想为这些数据点拟合一条曲线。现在这段代码只是用直线连接数据点。它看起来像这样:

我想知道如何拟合多项式曲线。

最佳答案

你必须使用line.curve([curve])。作为参数，您传递的曲线类型也是 d3 的一部分。此链接包含一个很好的示例: https://bl.ocks.org/pstuffa/26363646c478b2028d36e7274cedefa6

API 引用:https://github.com/d3/d3-shape/blob/master/README.md#line_curve

关于javascript - 如何用D3拟合多项式曲线？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46171347/

35

4

0

文章推荐： Scala ZIO.bracket : handling errors of releasing resource

文章推荐： asp.net - jquery scrollpane ms ajax updatepanel 回发后不起作用

文章推荐： sql - MS Access 数据库中的最短路径

python - 绘制国债 yield 曲线，如何使用 matplotlib 叠加两条 yield 曲线
我正在尝试创建 treasury yield curve 的图表比较两个不同日期的汇率。我很难将两条曲线组合起来并创建一个干净的图形。我的问题:如何将两条 yield 曲线绘制在一起， yield
用于随机森林分类的 ROC 曲线
我在 R 平台中使用 randomForest 包进行分类任务。 rf_object<-randomForest(data_matrix, label_factor, cutoff=c(k,1-k))
背景图像上的 CSS 曲线
我的设计师给我设计了这个设计，但我不知道如何最好地处理图像上方和下方的曲线。我考虑过 clip-path 但不知道如何 flex 它。如果可以的话，我不想使用图像。最佳答案您可以使用 borde
javascript - Canvas 曲线
我正在使用 Canvas 中的笔触和路径来制作两条线，我希望它们像波浪效果一样弯曲。而不是在 Photoshop 中创建实际图像来实现此目的。谁能帮忙得到如下图所示的曲线？我还想在末端实现圆 An
c++ - 曲线/路径骨架二值图像处理
我正在尝试开发一种可以处理图像骨架的路径/曲线的代码。我想要一个来自两点之间骨架的点 vector 。这段代码加了点就结束了，没找到解决办法。 #include "opencv2/highgui/
iphone - 如何在MKMapView上用MKOverlayView绘制圆弧/曲线
现在需要帮助。我可以用MKPolyline和MKPolylineView画线，但是如何在MKMapView上的两个坐标之间画弧线或曲线呢？非常感谢。最佳答案在回答问题之前，重要的是要提到 MKOv
python - 绘制多类问题的 ROC 曲线
我正在尝试应用 sklearn 的想法 ROC extension to multiclass到我的数据集。我的每类 ROC 曲线看起来都找到了一条直线，取消显示曲线波动的 sklearn 示例。我
r - 从数据框中手动创建 ROC 曲线
我有以下概念问题，我无法理解。以下是调查数据示例，其中我有一个时间列，指示某人需要多长时间才能回答某个问题。现在，我感兴趣的是清洁量将如何根据此阈值发生变化，即如果我增加阈值会发生什么，如果我降低
c - 误报概率图和 ROC 曲线
如何为使用视频的对象检测应用绘制每个窗口的误报率与未命中率(或误报概率)和 ROC(接收器操作曲线)的图表？如何确定误报和命中的数量？一个例子是很有用。最佳答案它很简单。将所有真正 (H0) 值存
r - 从随机森林分类中绘制 ROC 曲线
我正在尝试绘制随机森林分类的 ROC 曲线。绘图有效，但我认为我绘制了错误的数据，因为生成的绘图只有一个点(准确性)。这是我使用的代码: set.seed(55) data.controls <
r - 使用插入符号中的提升从两种不同的算法绘制 ROC 曲线
我有如下两个模型: library(mlbench) data(Sonar) library(caret) set.seed(998) my_data <- Sonar fitControl <-
classification - 过度拟合和 ROC 曲线
是否可以仅通过查看其 ROC 曲线来了解分类器是否过度拟合？我看到如果它的 AUC 太高(例如 98%)可能会过度拟合，但这也可能意味着分类器非常好。有没有办法区分这两种情况？最佳答案简短的回答:
带箭头的 JavaFX 线/曲线
我正在 JavaFX 中创建一个图形，它应该由有向边连接。最好是双三次曲线。有谁知道如何添加箭头？箭头当然应该根据曲线的末端进行旋转。这是一个没有箭头的简单示例: import javafx.ap
c# - XNA CatmullRom 曲线
我需要对我正在尝试的技术进行一些说明。我正在尝试将一个实体从 A 点移动到 B 点，但我不希望该实体沿直线移动。例如，如果实体位于 x: 0, y:0 并且我想到达点 x:50, y: 0，我希望实
r - 曲线 R 下的阴影面积
我试图在曲线下方绘制阴影区域，但阴影区域位于曲线上方。谁能告诉我我的代码有什么问题？ x=seq(0,30) y1=exp(-0.1*x) plot(x,y1,type="l",lwd=2,col="
c# - XNA CatmullRom 曲线
我需要对我正在尝试的技术进行一些说明。我正在尝试将一个实体从 A 点移动到 B 点，但我不希望该实体沿直线移动。例如，如果实体位于 x: 0, y:0 并且我想到达点 x:50, y: 0，我希望实
r - 绘制引导插入符号模型的 ROC 曲线
我有一个如下所示的模型: library(mlbench) data(Sonar) library(caret) set.seed(998) my_data <- Sonar fitControl <
pyspark 提取 ROC 曲线？
有没有办法从pyspark中的Spark ML获取ROC曲线上的点？在文档中，我看到了一个 Scala 的例子，但不是 python:https://spark.apache.org/docs/2.1
python - 如何绘制局部离群因子算法的 ROC 曲线？
我正在尝试使用Local Outlier Factor (LOF)算法，并想绘制 ROC 曲线。问题是，scikit-learn 提供的库不会为每个预测生成分数。那么，有什么办法可以解决这个问题吗？
c# - GDI+曲线 "overflowing"
我目前正在使用 GDI+ 绘制折线图，并使用 Graphics.DrawCurve 来平滑线条。问题是曲线并不总是与我输入的点匹配，这使得曲线在某些点上超出了图形框架，如下所示(红色是 Graph

首页

博学

6Ren·AI

商城

javascript - 如何用D3拟合多项式曲线？