График больше не отображается, когда я использую d3. json для доступа к json данным. - PullRequest
Новая
       4

График больше не отображается, когда я использую d3. json для доступа к json данным.

0 голосов
/ 14 февраля 2020

Я очень плохо знаком с D3. js - пожалуйста, вы можете помочь? Я успешно создал гистограмму и использовал json данные в коде, но когда я удалил их, чтобы создать отдельный файл json и вставил d3. json ("sales. json"). Then (функция (data) { graph как и раньше };) больше не работает. Это такая простая строка кода, чтобы вставить и сопоставить код, который я нашел в Интернете, поэтому я не могу понять, почему он не работает. Может кто-нибудь помочь, пожалуйста? Спасибо. 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="description" content="L4F - Axes and scales ">
  <title>SVG</title>
  <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
</head>
<body>
<h1> Sales data </h1>
<script>


d3.json("sales.json").then(function(data){


  var w = 500;
  var h = 500;
  var padding = 2;
  var lmargin = 50;
  var bmargin = 50;
  var tmargin = 50;

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

  var plotArea = svg.append('g');

  function colourPicker(v){
    if (v<=20) {return "#666666";}
    else if (v>20) {return "#ff0033";}
  }
  plotArea.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("x",function(d, i){return i * ((w - lmargin)/dataset.length) + lmargin;})
    .attr("y",function (d){ return h - (d.s*4) - bmargin;})
    .attr("width", (w-lmargin)/dataset.length - padding)
    .attr("height", function(d){return d.s*4;})
    .attr("fill", function(d){ return colourPicker(d.s);})

  plotArea.selectAll("text")
    .data(data)
    .enter()
    .append("text")
      .text(function(d) {return (d.m+" £"+d.s);})
      .attr("text-anchor", "middle")
      .attr("x", function(d, i) {return i*((w - lmargin)/dataset.length)+((w - lmargin)/dataset.length - padding)/2;})
      .attr("y", function(d) { return h-(d.s*4)+14 - bmargin;})
      .attr("font-family", "sans-serif")
      .attr("font-size", 12)
      .attr("fill", "white")

  var maxY = d3.max(dataset.map(function(d){return (d.s);}))
  var yScale = d3.scaleLinear()
              .domain([0, maxY*4])
              .range([h-maxY*4, 0]);
  var yAxis = d3.axisLeft()
                .scale(yScale);
  var yAxisGroup = svg.append('g')
                    .attr('transform', 'translate('+lmargin+','+(bmargin)+')')
                    .call(yAxis);

  yAxisGroup.append("text")
            .text("Sales")
            .attr("y", h/2 - bmargin)
            .attr("x", lmargin/2)
            .attr("transform", "translate(-230,230) rotate(270)")
            .style("fill", "black")
            .attr("font-size", "14")
            .attr("text-anchor", "middle");


};)


</script>

</body>
</html>

И мой json файл выглядит следующим образом .. 

[
    {
      "s":25,
      "m":"Jan"
    },

    {
      "s":10,
      "m":"Feb"
    },

    {
      "s":15,
      "m":"Mar"
    }

]
...