D3.js v5 Линейный график с маркерами круга - PullRequest
Новая
       61

D3.js v5 Линейный график с маркерами круга

1 голос
/ 24 сентября 2019

Линии на моем графике отображаются со странной черной заливкой вместо реальной линии.Есть идеи, что я делаю не так?Данные анализируются из CSV.Это многострочный график, где каждая серия является столбцом в CSV (столбцы: date, cat1, cat2, cat3, cat4).

В сторону - я заставил это работать по-другому, определяя каждую линию ценностей и добавляя путь.Но я столкнулся с проблемами с масштабированием оси.В конце концов мне нужно иметь четыре графика на моей html-странице, каждый из которых имеет разные масштабы оси (например, масштаб журнала на оси y).Поэтому мне нужно y = d3.scaleLog (). Domain (мой домен) .range (range), а затем в d3.line.y вернуть y (мое значение).

enter image description here

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