javascript - 使用 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 的错误。由于我不(我现在注意到)完全理解第一个代码块是如何工作的，所以我看不出如何使第二个代码块工作。有什么建议吗？

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")