我有下面的代码,其中包含将根据输入生成的跨度列表
<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 }
};
雷达图如下所示: