javascript - D3.js v5 带圆形标记的折线图

Question

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

除了 - 我通过定义每个值线并附加到路径来让它以不同的方式工作。但是我遇到了缩放轴的问题。我最终需要在我的 html 页面上有四个图，每个图都有不同的轴比例（例如 y 轴上的对数比例）。因此我需要 y = d3.scaleLog().domain(my domain).range(range) 然后在 d3.line.y 中返回 y(my value)。

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");   

标签： javascriptd3.jslinechart