2014-08-03 2 views
0

Мне нужно нарисовать круги на карте в местах расположения станций метро. Если температура на станции меньше 20 градусов, «ход» круга должен быть белым, в противном случае - черным.Операция «если» не работает в D3.js

Я пробовал много подходов, и следующий логически самый простой, но он не работает, может кто-нибудь сказать мне, почему?

    var stroke; // a global variable 

function ShowWeather(sId, place) { 
      var h; 
      $.ajax({ 
       type: "GET", 
       url: "Station-Weather1.xml", 
       dataType: "xml", 
       success: function (xml) {`$(xml).find('DWStation').each(function() { 
         var stId = $(this).find("sId").text() 

         if (sId == stId) { 
          var cDate = getCurrentDate(); 
          var wLocId = $(this).find("wId").text() 

          var wtURL = "http://localhost:56854/WebForm1.aspx?webURL=http://datapoint.metoffice.gov.uk/public/data/val/wxfcs/all/xml/"; 


          var wData; 
          $.ajax({ 
           url: wtURL, 
           dataType: 'xml', 
           data: wData, 
           success: weatherData, 
           error: MyMessage 
          }); 

          function weatherData(wData) { 


           var dv = $(wData).find("DV"); 

           var tmp = dv.find("Location").find("Period").find("Rep"); 


            if (attrib.name == "T") { // In the corresponding XML file "T" is the "Temperature" value 

if (attrib.value < 20) {stroke = 1;} else {stroke =0;} } } } }); },});}

 var data; 


     $.ajax({ 
      url: "webURL=http://www.tfl.gov.uk/tfl/syndication/feeds/cycle-hire/livecyclehireupdates.xml", 
      dataType: 'xml', 
      data: data, 
      success: parseXml, 
      error: MyMessage 
     }); 

     function parseXml(data) { 
      var c; 
      var color; 
      var stations = d3.select(data).selectAll("station")[0]; 
      g.selectAll("circle") 
        .data(stations) 
        .enter() 
        .append("circle") 
        .style("fill", "red") 
        .attr("cx", function (d) { 
         return projection([d.getElementsByTagName("long")[0].childNodes[0].nodeValue, d.getElementsByTagName("lat")[0].childNodes[0].nodeValue])[0]; 
        }) 
        .attr("cy", function (d) { 
         return projection([d.getElementsByTagName("long")[0].childNodes[0].nodeValue, d.getElementsByTagName("lat")[0].childNodes[0].nodeValue])[1]; 
        }) 
        .attr("r", 3) 


        .style ("stroke", function(d) 
        { 

       if (stroke == 1) { return c ="white"; } else { return c ="black"; } 
        }) 
+0

_ «это не работает, может кто-нибудь сказать мне, почему?» _ - Что происходит? Это просто выбор цвета, который не работает, или ...? Пожалуйста, уточните, что не работает. – nnnnnn

ответ

2

Вы делаете это более трудным, чем это должно быть - вы можете сделать проверку на значение атрибута и настройки цвета в одном месте, а не раскол это вне через несколько:

.style("stroke", function(d) { return d.T < 20 ? "white" : "black"; }) 

Это предполагает, что ваши данные stations, что вы связываете к кругам этот атрибут прилагается к нему.

+0

Информация о температуре получена из другой линии связи, и информация о станции получена из другого соединения. – user3297662

+0

И как эти данные связаны? –

+1

@ user3297662 Рассмотрите возможность их вложения в один объект, затем, используя d3.nest(), перед вводом данных(). В противном случае вам нужно создать циклы. Никогда не следует использовать циклы внутри функции данных d3. http://bl.ocks.org/phoebebright/raw/3176159/ –

Смежные вопросы