JSFiddle - React, Tailwind, and code Playground

JavaScript

var data = [
        {
            "shape": "circle",
            "x": 10,
            "y": 20,
            "lines": [
                {x1: "-10", y1: "-10", x2: "10", y2: "10"}
            ]
        },
        {
            "shape": "rect",
            "x": 30,
            "y": 20,
            "lines": [
                {x1: "-10", y1: "-10", x2: "10", y2: "10"}
            ]
        },
        {
            "shape": "circle",
            "x": 50,
            "y": 20,
            "lines": [
                {x1: "-10", y1: "-10", x2: "10", y2: "10"},
                {x1: "-10", y1: "10", x2: "10", y2: "-10"}
            ]
        },
        {
            "shape": "rect",
            "x": 70,
            "y": 20,
            "lines": [
                {x1: "-10", y1: "-10", x2: "10", y2: "10"},
                {x1: "-10", y1: "10", x2: "10", y2: "-10"}
            ]
        }
    ];

    var svg = d3.select("body").append("svg:svg"),
            w = 900,
            h = 600;

    svg.attr("width", w).attr("height", h);

    var shapes = svg.selectAll(".shape")
            .data(data)
            .enter()
            .append("g")
            .attr("transform", function (d) {
                return "translate(" + d.x + "," + d.y + ")";
            });

    var circles = shapes.filter(function (d) {
        return d.shape == "circle"
    })
            .append("circle")
            .attr("r", 10);

    var rect = shapes.filter(function (d) {
        return d.shape == "rect"
    })
            .append("rect")
            .attr("transform", "translate(-5, -5)")
            .attr("width", 10)
            .attr("height", 10);

    // how can I add all the lines in data.lines here?
    shapes.append("line")
            .attr("stroke", "red")
            .attr("x1", function (d) {
                return d.lines[0].x1
            })
            .attr("y1", function (d) {
                return d.lines[0].y1
            })
            .attr("x2", function (d) {
             ...