Визуализация раскрывающегося списка с использованием D3. js - PullRequest
Новая
       98

Визуализация раскрывающегося списка с использованием D3. js

0 голосов
/ 29 апреля 2020

Я новичок ie в d3 и хочу создать визуализацию карты с выпадающим списком. я буду делать визуализацию карты на основе опции, выбранной в выпадающем списке, который я создал, используя отдельную ссылку json. но есть проблема, когда я создаю переменную с именем input и назначаю ее в функции d3. json (), точечный график не отображается. 

 var input = $(".js-file-selector option:selected" ).val(); // get url as input

d3.json(input,
function(error, data){

при запуске кода отображается ошибка как это

"message": "Uncaught TypeError: Невозможно прочитать свойство 'features' of undefined", "filename": "https://stacksnippets.net/js", "lineno": 154, "colno ": 28} здесь указан код html, css и javascript, пожалуйста, помогите мне решить эту проблему. спасибо 

$(document).ready(function(){
  
  var maps = [ // store city name & url in a json
				{"name": "Ekspor", "url": "https://raw.githubusercontent.com/wiwinsrimulyani/open-data/master/eksporPerNegara.json"},
				{"name": "Impor", "url": "https://raw.githubusercontent.com/wiwinsrimulyani/open-data/master/imporpernegara.json"}
			];
  for (var i = 0; i < maps.length; i++){ // append an option per each json element

			    var name = maps[i]["name"];

			    var url = maps[i]["url"];

			    $('.js-file-selector').append("<option value=" + url + " id="+name+">" + name + "</option>");

			    }

  //define the svg height and width
  w = 1000;
  h = 480;
  
  
  //doing the projection
  var projection = d3.geo.equirectangular()
  
  var path = d3.geo.path()
               .projection(projection);
  
  var svg = d3.select('body')
              .append('svg')
              .attr('width', w)
              .attr('height', h)
  
 svg.append('rect')
  .attr('width', w)
  .attr('height', h)
  .attr('fill', 'white');
  
  var g = svg.append("g");
  
  //load the topojson
  
  d3.json('https://d3js.org/world-50m.v1.json',
         function(error, data){
          if(error) console.log(error);
    
      g.append('path')
       .datum(topojson.feature(data, data.objects.countries))
    
    
    //here is shown the maps
    .attr('d', path)
    
    
    //create the zoom effect
    var zoom = d3.behavior.zoom()
    .on("zoom", function(){
      g.attr("transform", "translate("+ d3.event.translate.join(",") +")scale(" + d3.event.scale + ")");
       g.selectAll('path')
      .attr("d", path.projection(projection));
    });
    svg.call(zoom);
    
    
    //load the data
   
    var input = $(".js-file-selector option:selected" ).val(); // get url as input

    d3.json(input,
    function(error, data){
      if(error) console.log(error);
      
      var locations = data.features;
      var hue = 0; //for creating the circle
      
      //create an object for holding the dataset
      
      locations.map(function(d){
        //create the property each circle, give the value from color
        hue += 0.36
        d.color = 'hsl(' + hue +', 100%, 50%)';
        
      });
      
      //classic d3 function
      g.selectAll('circle')
      .data(locations)
      .enter()
      .append('circle')
      .attr('cx', function(d){
        if(d.geometry){
          return projection([d.geometry.coordinates[0], d.geometry.coordinates[1]])[0];
        }
      })
      .attr('cy', function(d){
        if(d.geometry){
          return projection([d.geometry.coordinates[0], d.geometry.coordinates[1]])[1];
        }
      })
      
      //submit the r of the data
      .attr('r', function(d){
       if(d.properties.Peran2020){
         return parseInt(d.properties.Peran2020 + 5);
       }
      })
      
      .style('fill', function(d){
        return d.color;
      })
      
      
     //add ecent listener || mouseover
      .on('mouseover', function(d){
        d3.select(this).style('fill', 'black');
        d3.select('#country').text(d.properties.Negara);
 d3.select('#X2015').text(d.properties.X2015 + ' Juta US$');
 d3.select('#X2016').text(d.properties.X2016 + ' Juta US$');
 d3.select('#X2017').text(d.properties.X2017 + ' Juta US$');
 d3.select('#X2018').text(d.properties.X2018 + ' Juta US$');
 d3.select('#X2019').text(d.properties.X2019 + ' Juta US$');
 d3.select('#X2020').text(d.properties.X2020 + ' Juta US$');
 d3.select('#peran2020').text(d.properties.Peran2020 + ' Juta US$');
 d3.select('#tooltip')
   .style('left', (d3.event.pageX + 20) + 'px')
   .style('top', (d3.event.pageY - 80) + 'px')
   .style('display', 'block')
   .style('opacity', 0.8)
      })
      
      //add event listener || mouse out
      .on('mouseout', function(d){
        d3.select(this).style('fill', d.color);
        d3.select('#tip')
        .style('display', 'none');
      });
    });
  });
});
body {
  text-align: center;
  background-color: lightgray;
}

h2 {
  color: #343434;
  font-weight: normal;
  font-family: 'Ultra', sans-serif;
  font-size: 30px;
  line-height: 42px;
  text-transform: uppercase;
  text-shadow: 0 2px white, 0 3px #777;
}

path {
  stroke: red;
  stroke-width: 0.5px;
  fill: #93fa66;
}

#tooltip {
  text-align: left;
  padding: 16px;
  background-color: #80ffe5;
  border: 1px solid black;
  width: auto;
  opacity: 0;
  color: black;
  position: absolute;
}
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - A Pen by  wiwinsrimulyani</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<h2>Perkembangan Impor Non Migas Indonesia berdasarkan Negara Asal 2015-2020</h2>

<div id="wraper-file-selector">
		<select class="js-file-selector">
			<option value="#" selected disabled>Pilih Value</option>
		</select>
	</div>

<!-- the space for the map-->
<div id = "maps"></div>

<!-- the space for the tooltip -->

<div id = "tooltip">
  Negara : <span id = "country" class = "info"></span><br>
  Tahun 2015 : <span id = "X2015" class = "info"></span><br>
  Tahun 2016 : <span id = "X2016" class = "info"></span><br>
  Tahun 2017 : <span id = "X2017" class = "info"></span><br>
  Tahun 2018 : <span id = "X2018" class = "info"></span><br>
  Tahun 2019 : <span id = "X2019" class = "info"></span><br>
  Tahun 2020 : <span id = "X2020" class = "info"></span><br>
  peran 2020 : <span id = "peran2020" class = "info"></span><br>
  
  
</div>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js'></script>
<script src='https://d3js.org/topojson.v1.js'></script><script  src="./script.js"></script>

</body>
</html>
...