I am trying to create tabs so I can have a different chart showing up after a onClick() function and keeping the other elements the same but now after the onClick, new map loads up and other symbols and elements disappear.
////////////////////////////////////////////
/////////// Initiate legend ////////////////
////////////////////////////////////////////
var svg = d3.select(element[0])
.selectAll('svg')
.append('svg')
.attr("width", w + 300)
.attr("height", h)
svg.append("text")
.attr("x", w - 25)
.attr("y", 160)
.attr("font-size", "12px")
.attr("fill", "#002F6C")
.text("Radar Chart")
.attr("cursor", "pointer")
.attr("pointer-events", "auto")
.on("mouseover", function (d) {
d3.select(this).attr("opacity", 0.4)
})
.on("mouseout", function (d) {
d3.select(this).attr("opacity", 0.8)
})
.on("click", function () {
// $rootScope.tabVal = 'radar'
radarChartService.RadarChart(element[0], d, radarChartOptions)
$rootScope.applyif()
})
svg.append("text")
.attr("x", w - 25)
.attr("y", 180)
.attr("font-size", "12px")
.attr("fill", "#002F6C")
.text("Pie Radar Chart")
.attr("cursor", "pointer")
.attr("pointer-events", "auto")
.on("mouseover", function (d) {
d3.select(this).attr("opacity", 0.4)
})
.on("mouseout", function (d) {
d3.select(this).attr("opacity", 0.8)
})
.on("click", function () {
// $rootScope.tabVal = 'pie'
pieRadarChartService.PieRadarChart(element[0], d)
$rootScope.applyif()
})
//Create the title for the legend
var text = svg.append("text")
.attr("class", "title")
.attr('transform', 'translate(30,17)')
.attr("x", w - 70)
.attr("y", 20)
.attr("font-size", "12px")
.attr("fill", "#002F6C")
.text(function () {
if ($rootScope.analysisSubType == "highway_route_speeds" || $rootScope.analysisSubType == "speed") { return "Average speed" }
if ($rootScope.analysisSubType == "highway_route_delay") { return "Total delay time" }
if ($rootScope.analysisSubType == "highway_route_journey_time" || $rootScope.analysisSubType == "time") { return "Total journey time" }
if ($rootScope.analysisSubType == "distance") { return "Total distance" }
});
svg.append("text")
.attr("class", "title")
.style("font-weight", "bold")
.style("font-size", "14px")
.attr("x", 10)
.attr("y", 20)
.attr("font-size", "12px")
.attr("fill", "#002F6C")
.text(function () {
if ($rootScope.analysisSubType == "highway_route_speeds") { return "Average speeds from " + $rootScope.TMZSiteIndex[$rootScope.tmv_site] }
if ($rootScope.analysisSubType == "highway_route_delay") { return "Delay times from " + $rootScope.TMZSiteIndex[$rootScope.tmv_site] }
if ($rootScope.analysisSubType == "highway_route_journey_time") { return "Journey times from " + $rootScope.TMZSiteIndex[$rootScope.tmv_site] }
});
//Create close button
svg.append("svg:image")
.attr("class", "close_button")
.attr("x", function (d) { return element[0].clientWidth - 25; })
.attr("y", function (d) { return 0 })
.attr("xlink:href", "assets/img/close.svg")
.attr("width", 23)
.attr("height", 23)
.attr("opacity", 0.8)
.attr("cursor", "pointer")
.attr("pointer-events", "auto")
.on("mouseover", function (d) {
d3.select(this).attr("opacity", 0.4)
})
.on("mouseout", function (d) {
d3.select(this).attr("opacity", 0.8)
})
.on("click", function () {
scope.data = undefined
$rootScope.applyif()
})
//Initiate Legend
var legend = svg.append("g")
.attr("class", "legend")
.attr("height", 100)
.attr("width", 200)
.attr('transform', 'translate(30,45)')
;
//Create colour squares
legend.selectAll('rect')
.data(LegendOptions)
.enter()
.append("rect")
.attr("x", w - 65)
.attr("y", function (d, i) { return i * 17; })
.attr("width", 10)
.attr("height", 10)
.style("fill", function (d, i) { return colorscale[i]; })
;
//Create text next to squares
legend.selectAll('text')
.data(LegendOptions)
.enter()
.append("text")
.attr("x", w - 52)
.attr("y", function (d, i) { return i * 17 + 9; })
.attr("font-size", "11px")
.attr("fill", "#002F6C")
.text(function (d) { return d; })
;
}
}, 200)
})
}
}
}]);