Javascript 当我使用d3.json访问json数据时，图形不再出现_Javascript_Json_D3.js_Svg

Javascript 当我使用d3.json访问json数据时，图形不再出现

javascript json d3.js svg

Javascript 当我使用d3.json访问json数据时，图形不再出现,javascript,json,d3.js,svg,Javascript,Json,D3.js,Svg,我是D3.js的新手-你能帮忙吗？我已经成功地创建了一个条形图并在代码中使用了json数据，但是当我删除它以创建一个单独的json文件并插入d3.json（“sales.json”）。然后（函数（数据）{graph as before}；）它就不再工作了。这是一行非常简单的代码，可以插入并匹配我在网上找到的代码，所以我不明白为什么它不起作用。有人能帮忙吗？谢谢 <!DOCTYPE html> <html> <head> <meta charset="

我是D3.js的新手-你能帮忙吗？我已经成功地创建了一个条形图并在代码中使用了json数据，但是当我删除它以创建一个单独的json文件并插入d3.json（“sales.json”）。然后（函数（数据）{graph as before}；）它就不再工作了。这是一行非常简单的代码，可以插入并匹配我在网上找到的代码，所以我不明白为什么它不起作用。有人能帮忙吗？谢谢

<!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>

您是否通过web服务器提供服务？如果不是，而您只是从文件系统访问它，浏览器不允许文件系统上的文件访问文件系统上的另一个文件。啊，对了，不，我不是。谢谢你，罗伯特。我真的是从零开始，所以错过了很多基础知识（您可以使用类似Atom Live Server的东西（或VS代码等的等价物），然后它就可以工作了（原因由Robert确定）-谢谢Alex-很好的加载项！但仍然无法工作。我在Atom中的一个项目文件夹中有我的index.html和sales.json，我已经在使用它了。我按下Ctrl+Alt+L，它使用服务器启动了网页，但仍然没有图形。它仍然认为json是本地的吗？

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

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

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

]