使用JavaScript循环绘制SVG折线。

Question

我对HTML和JavaScript相当新，并且试图调整我在网上找到的一段代码。我创建了一个json文件，将其读取为数据。其中包含了链接，这些链接以前具有x1、x2、y1和y2坐标（直线）。我使用了以下代码来创建SVG线元素。

var link = svg
    .selectAll("line")
    .data(data.links)
    .enter()
    .append("line")
    .attr("x1", d => (d.x1 + translatex) * scale)
    .attr("x2", d => (d.x2 + translatex) * scale)
    .attr("y1", d => (d.y1 + translatey) * scale)
    .attr("y2", d => (d.y2 + translatey) * scale)
    .attr("id", d => (d.id))
    .attr("stroke", "black")

这段代码一开始运行良好。但是，由于我现在遇到的情况是线条不再是直线，因此我想调整这段代码以绘制折线。所以，链接不再有x1、y1等，而是有一系列点的列表。（长度可能会有所不同）

我正在努力想用JavaScript来绘制这个折线，但遇到了困难。我尝试了以下方法：

var link = svg
    .selectAll("polyline")
    .data(data.links)
    .enter()
    .append("polyline")
    .attr("stroke", "black")
    .data(data.links.points)
    .attr("points", d => (d[0] + translatex) * scale, (d[1] + translatey) * scale)

但是这给我带来了未知变量d的错误。由于我现在并不完全理解第一个代码块的工作原理，所以我无法看出如何让第二个代码块正常工作。是否有任何建议？

- user180146

---

在每种情况下，data.links看起来是什么样子？ - Paul LeBeau

{id: "1", type: "P", source: "1", target: "2", points: Array(2)} 或者 id: "1" points: Array(2) 0: (2) [610, 2716] 1: (2) [528, 2468] length: 2 proto: Array(0) source: "1" target: "2" type: "P" - user180146

我似乎特别困扰于一个链接应该被转换为折线（而它是一个链接的数组/列表），以及每个链接都有一个点的列表/数组。 - user180146

Answer 1

我最终解决了这个问题，具体如下：

var link = svg
    .selectAll("polyline")
    .data(data.links)
    .enter().append("polyline")
    .attr("points",function(d) { 
        convertedpoints = d.points.map(function(d) {return [(d[0] + translatex) * 
scale, (d[1] + translatey) * scale]})
        return convertedpoints.join(" ");})
    .attr("stroke", "black")
    .attr("stroke-width",1)
    .attr("fill", "none")

- user180146