d3.js 绘制线条和理解传递的数据时出现问题

ioekq8ef 于 2023-05-18 发布在其他

关注(0)|答案(1)|浏览(127)

我尝试在我的angular应用程序中渲染this example。
同样的数据，我复制函数，等等。
我可以看到带有节点的圆，但我在绘制路径/链接时遇到问题。
我的问题在于这个函数：

line = d3.lineRadial()
    .curve(d3.curveBundle.beta(0.85))
    .radius(d => d.y)
    .angle(d => d.x)

我在哪里知道d是什么？
我的IDE说，它是一个2个数字的向量，但当我记录数据时，它是一个包含x和y值的节点。
但是如果我尝试访问它们并写入d.x，我会得到错误TS2339: Property 'x' does not exist on type '[number, number]'.
这是我的函数现在的样子：

let line = d3.lineRadial()
      .curve(d3.curveBundle.beta(0.85))
      .radius((d,i) => {
        console.log("d");
        console.log(i);
        console.log(d);
        return d[0];
      })
      .angle(d => d[1]);

这是日志输出：

我有点困惑，日志怎么能告诉我运行时的不同...

d3.js

来源：https://stackoverflow.com/questions/74522273/problem-drawing-a-line-and-understanding-the-passed-data

1条答案

按热度按时间

m1m5dgzv1#

我只是检查了一下d3文档（也许有更多经验的人可以帮助你更多），但我们将从一些简单的开始：

array=[[10, 60], [40, 90], [60, 10], [190, 10]]
p=d3.line()(this.array)

在SVG中创建一个带有线的点的路径

<svg fill="transparent" stroke="black">
  <path [attr.d]="p"/>
</svg>

当你有一个d3.lineRadial时，你用一个数组“Angular 和半径”来“馈送”值

array=[[0, 0][1.0471975511965976, 2][2.0943951023931953, 4]....]
  p=d3.line()(this.array)

但是计算半径和Angular 有些“难”。因此，我们可以创建一个函数（1）

myfunction=d3.lineRadial()
  .angle((d, i) => (Math.PI / 4) * i)
  .radius((d, i) => (length - i) * 2)

并且我们可以使用这个函数来创建一个SVG的“路径”

p=this.myfunction({length:13})

如果你想“四舍五入”的“螺旋”使用.curve(d3.curveBundle.beta(0.85))好了，你可以使用所有在一个独特的instrucction

p = d3
    .lineRadial()
    .curve(d3.curveBundle.beta(0.85))
    .angle((d, i) => (Math.PI / 4) * i)
    .radius((d, i) => (length - i) * 2)({length:13});

(1)查看如何工作的功能，你使用，例如. .angle((d,i)=>a function of "i".然后，当你用一个属性为length的对象执行函数时，i从0到length-1，并返回[0，PI/4，2 *PI/4，3 *PI/4，...]。但d什么都不是

赞(0）回复(0）举报 2023-05-18

我来回答

d3.js 绘制线条和理解传递的数据时出现问题

1条答案

相关问题

热门标签

最新问答