单线图/图表

Question

***已更新，我可以添加日期<，但全部都集中在

有人可以在下面帮助我吗？我在网上看过，没有运气找到与我的问题类似的东西可以帮助我，或者我只是不总是了解他们在做什么。

我希望在一个Y轴上有一个小点，代表总收入，并且在我单击右侧不同年份的团队时会发生变化。

下面是我到目前为止拥有的代码及其产生的结果：

>>async function main(){

//parameters -------------------------------------------------
var w = 500;
var h = 600;
padding = 60;
//Data ------------------------------------------------------
var dataset = await d3.csv("payroll2.csv");
dataset = dataset.map(d=>({
            Year: parseInt(d["yearID"]),
            Team: d["teamID"],
            Name: d["name"],
            Salary: parseInt(d["salary"])
            }));
//Y Axis & Scale --------------------------------------------
var yScale = d3.scaleLinear()
            .domain([240, 0])
           .range([0+padding, h-padding]);

var yAxis = d3.axisLeft()
          .scale(yScale)
          .tickFormat(d3.format(".0f"));
//svg --------------------------------------------------------
var svg=d3.select("body")
        .append("svg")
        .attr("width",w)
        .attr("height",h);
//Call -------------------------------------------------------
svg.append("g")
.attr("class", "yaxis")
.attr("transform", "translate("+padding+",0)")
.call(yAxis);
};

//Text ----------------------------------------------------------------      
svg.selectAll("text")
            .data(preData)
            .enter()
            .append("text")
            //.attr("fill", "black")
            .attr("font-size", 20)
            .attr("x", 200)
            .attr("y", function(d,){return 150})
            .attr("text-anchore", "left")
            .text(function(d){return d["Year"]});

main();  

这就是我得到的：

这就是我想要的样子，但仅适用于一个团队：

所以现在我只是想让它显示单个团队的点数和年份。

我正在google控制台中使用带有d3.js的Javascript。

我不确定实际的标题是什么，但是对任何帮助将不胜感激