Как использовать D3, чтобы заполнить раскрывающиеся параметры из JSON? - PullRequest
Новая
       17

Как использовать D3, чтобы заполнить раскрывающиеся параметры из JSON?

0 голосов
/ 25 мая 2019

Я заполняю тег выбора с помощью D3, чтобы добавить параметры из строки JSON. Я не вижу, чтобы опции добавлялись к тегу select при запуске страницы. Я не верю, что я правильно обращаюсь к данным, и мне нужно знать, что я делаю неправильно.

Я подтвердил, что данные JSON извлекаются функцией d3.json (), но после этого я не уверен, как получить доступ к данным.

JSON 

{"iyear":{"0":1970,"1":1971,"2":1972,"3":1973,"4":1974,"5":1975,"6":1976,"7":1977,"8":1978,"9":1979,"10":1980,"11":1981,"12":1982,"13":1983,"14":1984,"15":1985,"16":1986,"17":1987,"18":1988,"19":1989,"20":1990,"21":1991,"22":1992,"23":1994,"24":1995,"25":1996,"26":1997,"27":1998,"28":1999,"29":2000,"30":2001,"31":2002,"32":2003,"33":2004,"34":2005,"35":2006,"36":2007,"37":2008,"38":2009,"39":2010,"40":2011,"41":2012,"42":2013,"43":2014,"44":2015,"45":2016,"46":2017}}

JavaScript 

d3.json("/named/").then((iyear) => {
    iyear.forEach((iyear) => {
        selector.append("option")
        .text(function (i) { return i.iyear; })
        .property("value", iyear);
    });
});

Я хочу, чтобы при раскрытии раскрывающегося списка я видел параметр для каждого года в данных JSON.

1 Ответ

0 голосов
/ 25 мая 2019

Способ d3 - выбрать не родительский элемент, а сами элементы (даже если они еще не созданы) и объединить их с данными. Создание новых элементов решается позже, работая с выбором enter.

Я не уверен, как вы можете вызывать forEach для объекта, но даже в этом случае использование функции для установки значения (как вы делаете для .text) не будет работать, потому что способ создания тегов параметров у них нет данные привязаны к ним. 

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
      margin: 0;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
  </style>
</head>

<body>
  <select></select>
  <script>
    var optionsData = [{
      value: '0',
      text: '1970'
    }, {
      value: '1',
      text: '1971'
    }];

    var selectTag = d3.select("select");

    //we have select all options tags from inside select tag (which there are 0 atm)
    //and assigned data as to be the base of modelling that selection.
    var options = selectTag.selectAll('option')
      .data(optionsData);

    //d3 sees we have less elements (0) than the data (2), so we are tasked to create
    //these missing inside the `options.enter` pseudo selection.
    //if we had some elements from before, they would be reused, and we could access their
    //selection with just `options`
    options.enter()
      .append('option')
      .attr('value', function(d) {
        return d.value;
      })
      .text(function(d) {
        return d.text;
      });
  </script>
</body>

В конечном счете, если это все, что вы хотите сделать, я бы поспорил с использованием d3. Было бы легко сделать выборку json и создание таких простых опций даже с простым js. Значение D3 показывает, когда вы имеете дело с более сложной логикой.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...