如何将 <span> 值绑定到 AngularJS 或 Jquery 中的雷达图字段名称

Question

我有下面的代码，其中包含将根据输入生成的跨度列表

<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 -> 为 3 个元素设置 dataset_v 时，再次设置 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 }
    };

雷达图如下所示：

Answer 1

我已经为这个问题创建了一个测试用例。你可以这样做：

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>

如何将 <span> 值绑定到 AngularJS 或 Jquery 中的雷达图字段名称

How to bind <span> values to the radar chart field names in AngularJS or Jquery

javascript

jquery

radar-chart

angularjs