javascript - 试图加载一些数据

标签 javascript html json svg

我试图了解如何运行一些代码。我想用 JSON 文件中的数据绘制圆圈。我不太确定该怎么做。我想我搞砸了不连接文件,或者我的 JSON 文件设置不正确......我的最终目标是制作一个连接的散点图,所以,现在,我只关注圆圈。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<svg id="s" xmlns="http://www.w3.org/2000/svg" />
<script type="text/javascript">
  function makeSVG(tag, attrs) {
    var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
    for (var k in attrs)
      el.setAttribute(k, attrs[k]);
    return el;
  }

  var data;
  $.getJSON("https://raw.githubusercontent.com/Nataliemcg18/Data/master/temp.json", function(data) {
    draw(data);
  });

  var circle = makeSVG('circle', {
    cx: 100,
    cy: 50,
    r: 40,
    stroke: 'black',
    'stroke-width': 2,
    fill: 'red'
  });
  var data
  document.getElementById('s').appendChild(circle);
</script>

<svg width="1000" height="1000">
        <line x1="200" y1="100" x2="200" y2="600" height="1000" width="1000" style="stroke:black;stroke-width:2"  /> 
        <line x1="200" y1="600" x2="900" y2="600" height="1000" width="1000" style="stroke:black;stroke-width:2" /> <!-- bottom line -->

[
  {"Month": 0, "Temperature": 32},
  {"Month": 1, "Temperature": 43},
  {"Month": 2, "Temperature": 52},
  {"Month": 3, "Temperature": 60},
  {"Month": 4, "Temperature": 70},
  {"Month": 5, "Temperature": 80},
  {"Month": 6, "Temperature": 90},
  {"Month": 7, "Temperature": 80},
  {"Month": 8, "Temperature": 65},
  {"Month": 9, "Temperature": 45},
  {"Month": 10, "Temperature": 33},
  {"Month": 11, "Temperature": 24}
]

最佳答案

这样的事情呢?
2 个值 - 零和最大值添加只是为了好玩...您仍然可以从原始 jQuery 请求中读取和传递数据。

// 1 (-2) new functions
function draw(data) {
    var placeHolder = document.getElementById('s');
    const diameter = 25, height = placeHolder.previousElementSibling.previousElementSibling.y2.baseVal.value - placeHolder.previousElementSibling.previousElementSibling.y1.baseVal.value;
    setMax(data, height - 2 * diameter); // set last temperature value as chart max
    for(var month in data) {
            var pair = data[month];
            var circle = makeSVG('circle', {
            cx: pair.Month * diameter * 2 + 200 + diameter,
            cy: 600 - diameter - pair.Temperature,
            r: diameter,
            stroke: 'black',
            'stroke-width': 2,
            fill: 'red'
        });
        placeHolder.appendChild(circle);
    }
}

function setMax(data, value) {
    data[data.length-1].Temperature = value;
}

// Your untouched logic
$.getJSON("https://raw.githubusercontent.com/Nataliemcg18/Data/master/temp.json", function(data) {
    draw(data);
});

function makeSVG(tag, attrs) {
    var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
    for (var k in attrs)
        el.setAttribute(k, attrs[k]);
    return el;
}

var circle = makeSVG('circle', {
    cx: 100,
    cy: 50,
    r: 40,
    stroke: 'black',
    'stroke-width': 2,
    fill: 'red'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<svg width="1000" height="1000">
    <line x1="200" y1="100" x2="200" y2="600" height="1000" width="1000" style="stroke:black;stroke-width:2" />
    <line x1="200" y1="600" x2="900" y2="600" height="1000" width="1000" style="stroke:black;stroke-width:2" />
<svg id="s" xmlns="http://www.w3.org/2000/svg" />

关于javascript - 试图加载一些数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60388515/

相关文章:

javascript - 弗洛特JS : Showing only part of the plotted data

javascript - 我可以假设我的 js 文件采用 gzip 压缩吗?

c++ - 在 C++ 中获取使用 HTML 表单发送的 POST 参数

javascript - 在 javascript、jQuery 或 css 中,如何让 div 或 iframe 扩展以填充其余空间

javascript - 如何让 dojo treeGrid 按两列分类?

json - 如何在 chrome 扩展 manifest.json 文件中设置多个内容安全策略

ios - 如何从 RESTful API 获取所有数据?

javascript - 在 Sequelize 中减去 2 个字段

javascript - JSON 和 javascript 对象

html - 为什么我们在 width 属性中写 calc ?宽度 :100% - 80px; = width:calc(100% - 80px);