Question

For some odd reason, my dates won't properly show up on my bar chart. When checking for errors, my dates always show up as "null" in the console. My professor and I have tried re-arranging the format of the code regarding the dates, as well as the .csv spreadsheet itself.

The gradient still works fine, but ever since we've been stumped on implementing the dated timeline feature, the bar chart info is out of view, as well.

I'm using the core sample 'Dogecoin' from this website:

https://coinmetrics.io/data-downloads/

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>DOGECOIN BAR CHART</title>

  <script src="https://d3js.org/d3.v4.min.js"></script>


  <style type="text/css">

  </style>
</head>

<body>

  <script type="text/javascript">
    var w = 1000;
    var h = 500;
    var margin = ({
      top: 20,
      right: 20,
      bottom: 30,
      left: 50
    });

    var svgMAIN = d3.select("body")
      .append("svg")
      .attr("height", h - margin.top - margin.bottom)
      .attr("width", w - margin.left - margin.right);

    var g = svgMAIN.append("g").attr("transform",
      "translate(" + margin.left + "," + margin.top + ")");

    var gradient = svgMAIN.append("defs")
      .append("linearGradient")
      .attr("id", "gradient")
      .attr("x1", "0%")
      .attr("y1", "0%")
      .attr("x2", "100%")
      .attr("y2", "100%")
      .attr("spreadMethod", "pad");

    gradient.append("stop")
      .attr("offset", "0%")
      .attr("stop-color", "#3f51b5")
      .attr("stop-opacity", 1);

    gradient.append("stop")
      .attr("offset", "100%")
      .attr("stop-color", "#009688")
      .attr("stop-opacity", 0);

    svgMAIN.append("rect")
      .attr("width", w)
      .attr("height", h)
      .style("fill", "url(#gradient)");


    var price = [];

    var date = [];

    var fixTime = d3.timeParse("%e-%b-%y");

    var x = d3.scaleTime().range([0, w]);

    var y = d3.scaleLinear().range([h, 0]);






    d3.csv("doge.csv", function(error, data) {

      data.map(function(d) {



        d.date = fixTime(d.date);

        price.push(d.priceUSD);


        y.domain([0, d3.max(data, function(d) {
          return d.priceUSD;
        })]);

        x.domain(d3.extent(data, function(d) {
          return d.date;
        }));

      });







      svgMAIN.append("g")
        .attr("transform", "translate(0," + h + ")")
        .call(d3.axisBottom(x))


      g.append("g")
        .call(d3.axisLeft(y))
        .append("text")
        .attr("fill", "#000")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", "0.71em")
        .attr("text-anchor", "end")
        .text("Price ($)");



      var rect = svgMAIN.selectAll("rect")
        .data(price)
        .enter()
        .append("rect")
        .attr("x", function(d, i) {
          return i * (w / price.length);
        })
        .attr("y", function(d) {
          return d;
        })
        .attr("width", w / price.length)
        .attr("height", function(d) {

          return d;
        })

        .attr("fill", "midnightblue")

        .on("mouseover", mouseOverPrice)
        .on("mouseout", mouseOutPrice);





      function mouseOverPrice(d, i) {
        d3.select(this).raise()
          .attr("fill", "white");

        svgMAIN.append("text")
          .attr("id", "priceValue")
          .attr("x", "50")
          .attr("y", "150")
          .text("$" + d)
          .attr("font-family", "sans-serif")
          .attr("font-size", "150px")
          .attr("fill", "white")
          .attr("font-weight", "bold");
      };

      function mouseOutPrice(d, i) {
        d3.select(this).attr("fill", "midnightblue");
        d3.select("#priceValue").remove();
      };



    });
  </script>
</body>

</html>

D3 v4 simple bar chart - date always returns null. timeParsing/format issue

0 个答案: