我知道这个问题已经被问过很多次了。我会尝试我找到的所有解决方案，但我很确定我错过了一些东西，或者，可能，我不明白它是如何工作的。
我正在尝试从加载的 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)
});
})
现在我正确填充了第一个下拉列表，但我无法填充第二个下拉列表。以下是哀悼.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 和 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，但我也希望在加载时弹出所有内容
有谁知道如何管理它？
非常感谢