Reputation: 53
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"; }
})
Upvotes: 0
Views: 763
Reputation: 109282
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.
Upvotes: 2