D3.js v5带有圆圈标记的折线图

Question

我的图表上的线条显示为黑色奇怪的填充形状，而不是实际的线条。知道我在做什么错吗？数据是从csv中解析出来的。这是一个多折线图，其中每个系列都是csv中的一列（列为：date，cat1，cat2，cat3，cat4）。

此外-通过定义每条价值线并将其附加到路径，我以不同的方式工作。但是我遇到了缩放轴的问题。我最终需要在我的html页面上具有四个图，每个图具有不同的轴比例（例如y轴上的对数比例）。因此，我需要y = d3.scaleLog（）。domain（我的域）.range（范围），然后在d3.line.y中返回y（我的值）。

var margin = {top: 20, right: 20, bottom: 30, left: 50},
                w = 960 - margin.left - margin.right,
                h = 500 - margin.top - margin.bottom;

            var padding =20;

            var xScale = d3.scaleTime()
                .domain([d3.min(dataset,function (d) { return d.date }),d3.max(dataset,function (d) { return d.date }) ]).range([padding, w - padding * 2])

            var yScale = d3.scaleLinear()
                .domain([0, d3.max(dataset,function (d) { return d.cat1 }) ]).range([h- padding, padding])    

            var xAxis = d3.axisBottom().scale(xScale);

            var yAxis = d3.axisLeft().scale(yScale);


            var svg1 = d3.select("body").append("svg")
                .attr("width", w + margin.left + margin.right)
                .attr("height", h + margin.top + margin.bottom)
                .append("g")
                .attr("transform",
                      "translate(" + margin.left + "," + margin.top + ")");

            var line = d3.line()
                 .x(function(d) { return xScale(d['date']); })
                 .y(function(d) { return yScale(d['cat1']); });

            var line2 = d3.line()
                 .x(function(d) { return xScale(d['date']); })
                 .y(function(d) { return yScale(d['cat2']); });
            var line3 = d3.line()
                 .x(function(d) { return xScale(d['date']); })
                 .y(function(d) { return yScale(d['cat3']); });

            var line4 = d3.line()
                 .x(function(d) { return xScale(d['date']); })
                 .y(function(d) { return yScale(d['cat4']); });

            var path = svg1.append('path').attr('d', line(dataset));
            var path2 = svg1.append('path').attr('d', line2(dataset));
            var path3 = svg1.append('path').attr('d', line3(dataset));
            var path4 = svg1.append('path').attr('d', line4(dataset));
            //draw points
            var selectCircle = svg1.selectAll(".circle")
                .data(dataset)

            selectCircle.enter().append("circle")
                .attr("class", "circle")
                .attr("r", 10)
                .attr("cx", function(d) {
                  return xScale(d.date)
                })
                .attr("cy", function(d) {
                  return yScale(d.cat1)
                })
                .attr("fill", "#FFC300")

            selectCircle.enter().append("circle")
                .attr("class", "circle")
                .attr("r", 10)
                .attr("cx", function(d) {
                  return xScale(d.date)
                })
                .attr("cy", function(d) {
                  return yScale(d.cat2)
                })
                .attr("fill", "#FF5733")

            selectCircle.enter().append("circle")
                .attr("class", "circle")
                .attr("r", 10)
                .attr("cx", function(d) {
                  return xScale(d.date)
                })
                .attr("cy", function(d) {
                  return yScale(d.cat3)
                })
                .attr("fill", "#C70039")

            selectCircle.enter().append("circle")
                .attr("class", "circle")
                .attr("r", 10)
                .attr("cx", function(d) {
                  return xScale(d.date)
                })
                .attr("cy", function(d) {
                  return yScale(d.cat4)
                })
                .attr("fill", "#900C3F")

            svg1.append("g").attr("class", "axis").attr("transform", "translate(0," + (h - padding) + ")").call(xAxis);       
            //draw Y axis
            svg1.append("g").attr("class", "axis").attr("transform", "translate(" + padding + ",0)").call(yAxis);
            // add label
            svg1.append("text").attr("x", (w/2)).attr("y", h+30).attr("text-anchor", "middle").text("Year");
            svg1.append("text").attr("x", padding).attr("y", padding-20).attr("text-anchor", "middle").text("# of Events");            
            //add title
            svg1.append("text").attr("x", (w/2)).attr("y", padding).attr("text-anchor", "middle").text("Events per Year by Category");