我知道它已经被问过很多次了。我会尝试我找到的所有解决方案，但我很确定我错过了一些东西，或者，我可能不明白它是如何工作的。
我正在尝试从加载的 json 构建级联下拉列表。这是我迄今为止构建的代码
//retrieving alert data from db
const url_data = ("../../app/predictive/config/query.php");
var pred = d3.json(url_data).then(function(data) {
var dataset = d3.values(data);
console.log(dataset);
//nesting the array by brand Key
var nest = d3.nest()
.key(function(d) { return d.brand; })
.entries(dataset);
console.log(nest)
//populate brand select from array
var select = d3.select('#advertiser').selectAll('option')
.data(nest).enter()
select.append('option')
.text(function(d, i) {
return '' + d.key + ''})
//appending attribute value to select option
.attr("value", function (d, i) {
return d.key;})
// var select2 = d3.select('#media').selectAll('option')
var brand_sel = d3.select('select')
.on("change",function(d){
var selected = d3.select("#advertiser").node().value;
console.log( selected );
//filter array on the first select
var media =nest.filter(function(d) {
return d.key == selected
})
console.log(media)
var select2 = d3.select('#media').selectAll('option')
.data(media)
.enter()
select2.append('option')
.text(function(d, i) {
return d.brand })
console.log(select2)
});
})
现在我正确填充了第一个下拉列表，但无法填充第二个。这是 condole.log（媒体）：
0:
key: "APPLE"
values: Array(2)
0:
id_alert: 2
advertiser: "Q8"
brand: "Q8 CARBURANTI"
first_seen_media: "italia 1"
first_seen: "2020-01-08"
last_seen: "2020-01-08"
media_type: "TV"
description: "none"
1:
id_alert: 3
advertiser: "Q8"
brand: "Q8 CARBURANTI"
first_seen_media: "other"
first_seen: "2020-01-10"
last_seen: "2020-01-10"
media_type: "DIGITAL"
description: "OTHER"
在 select2 中，我获得了一个空下拉列表，而不是提升 media_type 字段
我希望有人能帮助我，因为我读了很多书，我的眼睛说我找到了另一种方式
正如你可能理解的，我也是 D3 anf javascritp 的新手，我正在边做边学
非常感谢您的帮助
终于我明白了，即使我认为这不是处理它的最佳方式。
这是我的 html
<!DOCTYPE html>
<html lang="en">
<head></head>
<body id="body">
<div id="advertiser"><label class="select-label">Brand</label></div>
<div id = "media"><label class="select-label">Media</label></div>
<div id = "date"><label class="select-label">Start Date</label></div>
<div id = "owner"><label class="select-label">Publisher</label></div>
</body>
</html>
这是我的 d3js 代码
//retrieving alert data from db
const url_data = ("../../app/predictive/config/query.php");
var pred = d3.json(url_data).then(function(data) {
update(data)});
function update(d){
//nesting array for first select
var nest1 = d3.nest()
.key(function(a) { return a.brand; })
.key(function(d) { return d.media_type; })
.key(function(d) { return d.first_seen; })
.key(function(d) { return d.first_seen_media; })
.entries(d)
console.log(nest1);
var brand = d3.select("#advertiser")
brand
.append("select")
.attr('class', "custom-select")
.attr('id', 'brand')
.selectAll("option")
.data(nest1)
.enter()
.append("option")
.attr("value", function(d){return d.key;})
.text(function(d){return d.key;})
// identify the selected brand and store in slected var
//then filter by selection and then
//build the seconf nest
// brand selection
var brand_sel = d3.select('select')
.on("change",function(b){
var selectedBrand = d3.select("#brand").node().value;
console.log(selectedBrand)
//filter nest array by the selectred var on user first slection
var filteredMedia =nest1.filter(function(d) {
return d.key == selectedBrand})[0]
//extract value of second nested array
var nest2 = filteredMedia.values;
//clean second media selection before appending the new selected media
var clean = d3.select("#media").selectAll("select").remove();
//create the secod select
var media = d3.select("#media")
media
.append("select")
.attr('class', "custom-select")
.attr('id', 'media_type')
.selectAll("option")
.data(nest2)
.enter()
.append("option")
.attr("value", function(d){return d.key;})
.text(function(d){return d.key;})
// media selection
var selectedMedia = d3.select("#media_type").node().value;
//filter nest array by the selected var on user second slection
var filteredDate =nest2.filter(function(d) {
return d.key == selectedMedia})[0]
//extract value of second nested array
var nest3 = filteredDate.values;
//clean second media selection before appending the new selected media
var clean = d3.select("#date").selectAll("select").remove();
//create the secod select
var date = d3.select("#date")
date
.append("select")
.attr('class', "custom-select")
.attr('id', 'start_date')
.selectAll("option")
.data(nest3)
.enter()
.append("option")
.attr("value", function(d){return d.key;})
.text(function(d){return d.key;})
// identify the selected date and store in slected var
//then filter by selection and then
//build the fourth nest
// media selection
var selectedDate = d3.select("#start_date").node().value;
//filter nest array by the selected var on user second slection
var filteredOwner =nest3.filter(function(d) {
return d.key == selectedDate})[0]
//extract value of second nested array
var nest4 = filteredOwner.values;
//clean second media selection before appending the new selected media
var clean = d3.select("#owner").selectAll("select").remove();
//create the secod select
var date = d3.select("#owner")
date
.append("select")
.attr('class', "custom-select")
.attr('id', 'media_owner')
.selectAll("option")
.data(nest4)
.enter()
.append("option")
.attr("value", function(d){return d.key;})
.text(function(d){return d.key;})
})}
现在我正在努力研究如何在加载时填充所有 div。正如你所看到的，我的脚本根据第一个下拉菜单填充了不同的 div，但我也希望所有内容都在加载时填充
有谁知道如何管理它？
非常感谢
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句