Как привязать значения ‹span› к именам полей радарной диаграммы в AngularJS или Jquery

У меня есть код ниже, в котором есть список диапазонов, которые будут созданы на основе ввода

<div id="tags" style="border:none">
<span class="tag" id="4"></span>
<input type="text" id="inptags" value="" placeholder="Add max of 6 values  (enter,)" />
</div>

Например, теги span::

Movies, Housing, Bank, Holiday, Restaurant, Travel

Для каждого из вышеуказанных имен мои пользователи давали некоторое число (в пределах 1-20)

Я пытаюсь связать эти имена с моим входным именем радарной диаграммы d3.

Ладарная диаграмма:

Пустая радиолокационная диаграмма заполнена нижеприведенным объектом

dataset_v = {
            d0: { id: 0, name: '', value: 3 },
            d1: { id: 1, name: '', value: 3 },
            d2: { id: 2, name: '', value: 3 },
            d3: { id: 3, name: '', value: 3 },
            d4: { id: 4, name: '', value: 3 },
            d5: { id: 5, name: '', value: 3 }
        };

Код для рисования диаграммы:

 <radial-plot dsn="dataset_v">

Это поле имени переменной dataset_v должно быть привязано к входным значениям диапазона.

Допустим, если я ввожу только один входной диапазон -> моя диаграмма должна отображаться только с одним именем поля, и значение может быть любым по умолчанию, пока пользователь не изменит его. Если я ввожу два входных значения диапазона -> диаграмма должна отображать эти два имени поля и с значения по умолчанию ....

Эти значения по умолчанию в лепестковой диаграмме позже могут быть скорректированы пользователями в соответствии с их требованиями.

Как я могу связать значения моего входного диапазона с именами моей переменной dataset_v?

Я уже проделал некоторую работу и добился определенного прогресса, но не убежден.

Вручную я создал с помощью javascript приведенный ниже метод, который работает, но, как вы видите, он неэффективен, так как вручную я должен поставить условие для каждого тега. Пример: когда тегов 3 -> установить dataset_v для 3 элементов, когда снова установлено 4, когда снова установлено 5,... :

    $(function () {
        $('#tags input').on('focusout', function () {
            var txt = this.value.replace(/[^a-zA-Z0-9\+\-\.\#]/g, '');
            if (txt) {
                $(this).before('<span class="tag">' + txt.toLowerCase() + '</span>');
            }
            this.value = "";
        }).on('keyup', function (e) {
            // if: comma,enter (delimit more keyCodes with | pipe)
            if (/(188|13)/.test(e.which)) $(this).focusout();
            if ($('#tags span').length == 3) {
                var div = document.getElementById("tags");
                var spans = div.getElementsByTagName("span");
      dataset_v = {
            d0: { id: 0, name: '', value: 3 },
            d1: { id: 1, name: '', value: 3 },
            d2: { id: 2, name: '', value: 3 }
           };
            }
         if ($('#tags span').length == 4) {
                var div = document.getElementById("tags");
                var spans = div.getElementsByTagName("span");
        dataset_v = {
            d0: { id: 0, name: '', value: 3 },
            d1: { id: 1, name: '', value: 3 },
            d2: { id: 2, name: '', value: 3 },
            d2: { id: 3, name: '', value: 3 }
           };
            }
            if ($('#tags span').length == 8) {
                document.getElementById('inptags').style.display = 'none';
            }
        });
        $('#tags').on('click', '.tag', function () {
            $(this).remove();
            document.getElementById('inptags').style.display = 'block';
        });
    });

Есть ли способ динамически связать мои входные значения диапазона с именами моей переменной радарной диаграммы d3 - с помощью обычного jquery или Angular JS/Javascript?

Скриншоты

Входные диапазоны:

введите здесь описание изображения

Для приведенной ниже переменной dataset_v

dataset_v = {
        d0: { id: 0, name: 'Housing', value: 12 },
        d1: { id: 1, name: 'Movies', value: 5 },
        d2: { id: 2, name: 'Bank', value: 8 },
        d3: { id: 3, name: 'Holiday', value: 8 },
        d4: { id: 4, name: 'Restaurant', value: 6 },
        d5: { id: 5, name: 'Travel', value: 4 }
    };

Диаграмма радара выглядит так:

введите здесь описание изображения


javascript jquery angularjs radar-chart
person Satheesh Panduga    schedule 20.11.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я создал тестовый пример для этой проблемы. Вы можете сделать что-то вроде этого:

var div = $("#tags");
var spans = div.find("span");
var dataset_v = {}; // declare a blank object

spans.each(function(i, elem) { // loop over each spans
  dataset_v["d" + i] = { // add the key for each object results in "d0, d1..n"
    id: i, // gives the id as "0,1,2.....n"
    name: $(elem).text(), // push the text of the span in the loop
    value: 3 // you should add this value as per your need.
  }
});
// d0: { id: 0, name: '', value: 3 },

$('pre').append(JSON.stringify(dataset_v));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='tags'>
  <span>test1</span><span>test2</span><span>test3</span><span>test4</span><span>test5</span><span>test6</span>
</div>
<p><pre></pre>
</p>

person Jai    schedule 20.11.2015
comment
Большое спасибо, Джай, это работает :).... Но дело в том, как я могу привязать эту переменную к моей диаграмме. Я заполняю диаграмму, используя ‹radial-plot dsn=dataset_v›, эта переменная находится в функции angular js. например app.controller('radCtrl', function ($scope) { $scope.dataset_v = {}; ‹‹сохранил ваш код здесь›› }); - person Satheesh Panduga; 20.11.2015
comment
Затем вам нужно добавить наблюдателя в область действия, чтобы увидеть, изменяется ли этот набор данных, или это можно сделать и в angular, но вам нужно использовать псевдоним оболочки angular.element() jqLite. - person Jai; 20.11.2015
comment
в моем событии focusout я могу поместить результирующее значение dataset_v в div.. и я вижу, что это правильно.. Теперь, как я могу связать эту переменную с этими динамическими данными.. чтобы я мог видеть изменения на моей диаграмме как и когда я ввожу новый диапазон ввода - person Satheesh Panduga; 20.11.2015
comment
Привет, Джай, я пытался использовать часы, но не смог выполнить двустороннюю привязку. Не могли бы вы помочь сделать двустороннюю привязку значений диапазона к объекту dataset_v ? - person Satheesh Panduga; 20.11.2015