Не удается заставить масштаб работать правильно в D3, чтобы сделать диаграмму водопада - PullRequest
Новая
       46

Не удается заставить масштаб работать правильно в D3, чтобы сделать диаграмму водопада

0 голосов
/ 07 апреля 2020

Текущее изображение

В настоящее время я пытаюсь создать диаграмму водопада, используя только D3 и javascript (в основном D3), и сравниваю закрытые запасы по дням. Мне нужно, чтобы каждая дата имела одинаковую ширину, чтобы я мог включить прямоугольники. Я могу получить только отдельные тики или два очка. Что мне нужно изменить в коде, чтобы заставить работать шкалу. Там не так много кода, поэтому я просто вставлю все это ниже. (Это D3 v4). 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Personal Figure</title>
        <script src="E:\College Shit\CGT 370\Assignment 5\d3.js"></script>
        <style>

        </style>
    </head>
    <body>

        </div>
        <script>

            var w = 1200;
            var h = 600;
            var padding = 60;

            var dataset, xScale, yScale;
            //For converting strings to Dates
            var parseTime = d3.timeParse("%m/%d/%Y");

            //For converting Dates to strings
            var formatTime = d3.timeFormat("%e");

            var price = [];

            var day = [];


            //Function for converting CSV values from strings to Dates and numbers
            var rowConverter = function(d) {
                return {
                    Date: parseTime(d.Date),
                    Closing: parseFloat(d.Closing)
                };
            }

            var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);


            d3.csv("https://raw.githubusercontent.com/nathanrk1/Data-Files/master/Microsoft%20Stock.csv",rowConverter,function(data) {

            dataset=data;

            dataset.forEach(function(i){
                price.push(i.Closing);
             });

            dataset.forEach(function(i){
                day.push(i.Date);
             });

            var xScale = d3.scaleBand()
                .domain([day])
                .range([padding, w - padding]);

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


            var xAxis = d3.axisBottom()
                .scale(xScale)
                .ticks(25)
                .tickFormat(formatTime);;

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


            svg.selectAll("rect")
            .data(dataset)
            .enter()
            .append("rect")
            .attr("x", function(d){
                return xScale(d.Day);
            })
            .attr("y", function(d){
                return yScale(d.Closing)+10;
            })
            .attr("width",20)
            .attr("height",20);


            svg.append("g")
                .attr("class", "axis")
                .attr("transform", "translate(0," + (h - padding) + ")")
                .call(xAxis);

            svg.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(" + padding + ",0)")
            .call(yAxis);
            });




        </script>

    </body>
</html>
...