Javascript 使用d3.js library 4.3.0将矩形条形图转换为折线图

从上面的代码中可以看出它正在生成条形图，但我想生成折线图。请您建议是否需要对此代码进行任何修改。用粗体斜体标记的追加（“rect”）

有人建议如何使用d3.js库将条形图转换为折线图吗

---

请主要检查粗体代码，因为它正在创建条形图

您是否可以添加工作代码段，这将有助于解决您的问题。很抱歉，上面的格式不正确。我想在折线图中转换

Any One Suggest How Convert Bar Chart To Line Chart using d3.js Library

    // THis Data
    var lineData = [
      {
        groupName: "test1",
        values: [0.45, 0.15, 0.25, 0.57, 0.57]
      }
    ];

    const svgRoot = document.documentElement;
    const chartRequestData = req.body as RequestData;

    const series = chartRequestData.series;
    const inputData = lineData;
    const flatInputData = flatMap(
      x =>
        x.values.map(
          v => ({ groupName: x.groupName, value: v } as FlatInputDataElement)
        ),
      inputData
    );

    // set the dimensions and margins of the graph
    const margin = { top: 100, right: 80, bottom: 100, left: 80 };
    const width = chartRequestData.width - margin.left - margin.right;
    const height = chartRequestData.height - margin.top - margin.bottom;
    SVG(svgRoot);

    // console.log(svgRoot.outerHTML);
    const options = { container: svgRoot.outerHTML, selector: "svg" };
    const d3n = new D3node(options);
    // @ts-ignore
    const d3 = d3n.d3 as d3;

    const yExtents = inputData.map((yearData: InputDataModel) =>
      d3.extent(yearData.values, (v: any): any => v)
    );
    const yRange = [
      d3.min(yExtents, (d: number[]) => Math.floor(Math.min(d[0], 0))),
      d3.max(yExtents, (d: number[]) => Math.ceil(Math.max(d[1], 0)))
    ];
    const yScale = d3
      .scaleLinear()
      .domain(yRange)
      .range([height, 0]);
    const yAxis = d3.axisLeft(yScale);
    const yGrid = d3
      .axisLeft(yScale)
      .tickSize(-width)
      .tickFormat("");

    const xScale = d3
      .scaleBand()
      .domain(
        inputData.map(d => d.groupName),
        (d: any) => d
      )
      .rangeRound([0, width])
      .padding(0.1);
    const xAxis = d3.axisBottom(xScale);

    // color palette = one color per subgroup
    var color = d3
      .scaleOrdinal()
      .domain(series)
      .range(["#418cf1", "#fcb341", "#e14008", "#139241"]);

    // append the svg object to the body of the page
    // const svg = d3n.createSVG(width, height)
    d3.select("svg")
      .selectAll("*")
      .remove();

    const svg = d3
      .select("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    // add the Y gridlines
    svg
      .append("g")
      .attr("class", "grid")
      .call(yGrid);

    svg.selectAll(".grid .tick line").attr("stroke", "#dcdcdc");

    svg.selectAll(".grid path.domain").attr("stroke", "#dcdcdc");

    const bandsLength = inputData.length;
    const barsPerBand = flatInputData.length / bandsLength;
    const bandwidth = xScale.bandwidth() / barsPerBand;

    //Above the code creating bar chart
    svg
      .selectAll("rect")
      .data(flatInputData)
      .enter()
      ***.append("rect")***
      .attr(
        "x",
        (d: FlatInputDataElement, i: number) =>
          xScale(d.groupName) + (i % barsPerBand) * bandwidth
      )
      .attr("y", (d: FlatInputDataElement) => yScale(Math.max(0, d.value)))
      .attr("width", bandwidth)
      .attr("height", (d: FlatInputDataElement) =>
        d.value !== null ? Math.abs(yScale(d.value) - yScale(0)) : 0
      )
      .attr("fill", (_d: FlatInputDataElement, i: number) =>
        color(i % barsPerBand)
      );