График акций D3 json не отображается

Не удается правильно получить данные из JSON. Моя диаграмма даже не может быть отображена. Любые идеи о том, как я могу это исправить?

    <svg width="960" height="500"></svg>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script>

    var svg = d3.select("svg"),
        margin = {top: 20, right: 20, bottom: 30, left: 50},
        width = +svg.attr("width") - margin.left - margin.right,
        height = +svg.attr("height") - margin.top - margin.bottom,
        g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var parseTime = d3.timeParse("%d-%b-%y");

    var x = d3.scaleTime()
        .rangeRound([0, width]);

    var y = d3.scaleLinear()
        .rangeRound([height, 0]);

    var line = d3.line()
        .x(function(d) { return x(d.timeStr); })
        .y(function(d) { return y(d.bid); });

    d3.json("bboList.json", function(d) {
      d.timeStr = parseTime(d.timeStr);
      d.bid = +d.bid;
      return d;
    }, function(error, data) {
      if (error) throw error;

      x.domain(d3.extent(data, function(d) { return d.timeStr; }));
      y.domain(d3.extent(data, function(d) { return d.bid; }));

      g.append("g")
          .attr("transform", "translate(0," + height + ")")
          .call(d3.axisBottom(x))
        .select(".domain")
          .remove();

      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 ($)");

      g.append("path")
          .datum(data)
          .attr("fill", "none")
          .attr("stroke", "steelblue")
          .attr("stroke-linejoin", "round")
          .attr("stroke-linecap", "round")
          .attr("stroke-width", 1.5)
          .attr("d", line);
    });

    </script>

Заметки:

  • Аск и бид bboList, а цена tradeList указаны в сотнях пенни, поэтому 233200 --> 23,32 доллара.

  • Время в tradeList указано в наносекундах, поэтому 34574353918784 --> 09:36:14.353

    {"bboList":[{"ask":235400,"bid":231800,"timeStr":"09:30:00.000"},
    {"ask":235400,"bid":230900,"timeStr":"09:30:07.819"},
    {"ask":238300,"bid":230900,"timeStr":"09:30:07.819"},
    {"ask":238300,"bid":227500,"timeStr":"09:30:26.786"},
    ...

json d3.js stock
person Edwards    schedule 26.02.2017    source источник
comment
Серьезно, если вам нужна помощь, помогите нам помочь вам. Прочтите как задать вопрос и соответствующим образом обновите вопрос.   -  person Robert Longson    schedule 27.02.2017
comment
хорошо, извините, я впервые использую это, все еще привыкаю к ​​этому. я сделаю лучше   -  person Edwards    schedule 27.02.2017

Ответы (1)


arrow_upward
1
arrow_downward

d3.json не принимает функцию доступа (или строку). Должно быть просто:

d3.json(url[, обратный вызов])

В вашем коде:

d3.json("bboList.json", function(d) {
    d.timeStr = parseTime(d.timeStr);
    d.bid = +d.bid;
    return d;
}, function(error, data) {
    if (error) throw error;
    //...
});

Все, что находится между URL и function(error, data), является функцией строки.

Решение: удалите его и приведите значения к числам и датам, используя forEach:

d3.json("bboList.json", function(error, data) {
    if (error) throw error;

    data.forEach(d => {
        d.timeStr = parseTime(d.timeStr);
        d.bid = +d.bid;
    });

    /...
});
person Gerardo Furtado    schedule 27.02.2017