Как получить доступ к вложенным данным в D3js - PullRequest
Новая
       15

Как получить доступ к вложенным данным в D3js

0 голосов
/ 07 февраля 2020

Я знаю, что об этом спрашивали много раз. Я попробую все решения, которые я нашел, но я совершенно уверен, что что-то упустил или, возможно, я не понимаю, как это работает.

Я пытаюсь построить каскадный выпадающий список из загруженного 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 (media): 

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, и я изучаю обучение, выполняя

большое спасибо за любую помощь

1 Ответ

0 голосов
/ 12 февраля 2020

наконец я понял, даже если я верю, что это не лучший способ справиться с этим.

вот мой 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>

вот мой код d3 js 

//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 в зависимости от первого выпадающего списка, но я также хочу, чтобы все загружалось при загрузке

Кто-нибудь знает, как это сделать?

большое спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...