我是D3.js的新手（版本5），但我已经能够使用JSON数据创建基本的条形图。Y轴标记成绩百分比，X轴标记日期。目前它显示每月的成绩。如何添加标记每月目标成绩的线标记？另外，如何添加从每个Y轴刻度开始在图表中移动的水平线和图例？

• • 我的条形图：**（https://i.stack.imgur.com/lQ4uq.png）
• • 所需条形图：**（https://i.stack.imgur.com/T9gJ7.png）
• • 代码**：

<div style="text-align: center;">
    <h1>Grade %</h1>
    <div id="GradeChart"></div>
</div>

<script>
    // Data Example
    data = { 
    'month': date, 'grade': 90, 'target': 85,
    'month': date, 'grade': 89, 'target': 85,
    'month': date, 'grade': 78, 'target': 85,
    'month': date, 'grade': 99, 'target': 100,
    'month': date, 'grade': 50, 'target': 85,
    'month': date, 'grade': 60, 'target': 90,
    'month': date, 'grade': 65, 'target': 85,
    'month': date, 'grade': 75, 'target': 85,
    'month': date, 'grade': 86, 'target': 80,
    'month': date, 'grade': 100, 'target': 85,
    'month': date, 'grade': 1, 'target': 85,
    'month': date, 'grade': 27, 'target': 85,
    };

    const width = 1200;
    const height = 600;
    const margin = { top: 50, bottom: 150, left: 50, right: 50 };

    const svg = d3.select('#GradeChart')
        .append('svg')
        .attr('width', width - margin.left - margin.right)
        .attr('height', height - margin.top - margin.bottom)
        .attr("viewBox", [0, 0, width, height]);

    const x = d3.scaleBand()
        .domain(d3.range(data.length))
        .range([margin.left, width - margin.right])
        .padding(0.1)

    const y= d3.scaleLinear()
        .domain([0, 100])
        .range([height - margin.bottom, margin.top])

    svg
        .append("g")
        .attr("fill", 'royalblue')
        .selectAll("rect")
        .data(data)
        .join("rect")
        .attr("x", (d, i) => x(i))
        .attr("y", d => y(d.percent))
        .attr('title', (d) => d.percent)
        .attr("class", "rect")
        .attr("height", d => y(0) - y(d.percent))
        .attr("width", x.bandwidth());

    function yAxis(g) {
        g.attr("transform", `translate(${margin.left}, 0)`)
        .call(d3.axisLeft(y).ticks(null, data.format))
        .attr("font-size", '20px')
    }

    function xAxis(g) {
        g.attr("transform", `translate(0,${height - margin.bottom})`)
        .call(d3.axisBottom(x).tickFormat(i => data[i].month))
        .attr("font-size", '20px')
        .selectAll("text")  
        .style("text-anchor", "end")
        .attr("dx", "-.8em")
        .attr("dy", ".15em")
        .attr("transform", "rotate(-65)")
    }

    svg.append("g").call(xAxis);
    svg.append("g").call(yAxis);
    svg.node();
</script>

我尝试将目标数据追加为另一个条形以创建分组条形图，但条形重叠而不是并排。如果下面的条形的值小于上面的条形，则下面的条形不可见。

svg
        .append("g")
        .attr("fill", 'green')
        .selectAll("rect")
        .data(data)
        .join("rect")
        .attr("x", (d, i) => x(i))
        .attr("y", d => y(d.target))
        .attr('title', (d) => d.target)
        .attr("class", "rect")
        .attr("height", d => y(0) - y(d.target))
        .attr("width", x.bandwidth());