'if' statement not working in D3.js

Question

I need to plot circles on a map at locations of tube stations. If the temperature at the station is less than 20 degrees, the 'stroke' of the circle must be white, otherwise black.

I tried many approaches and the following one is logically the simplest but it doesnot work can someone tell me why?

                    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"; }
                   })

Answer 1

You're making this more difficult than it needs to be -- you can do the checking for an attribute value and the setting of the colour in one place rather than split it out across several:

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

This assumes that your stations data that you bind to the circles has this attribute attached to it.