I'm working on a map where features will highlight as you mouse over them. I'm using the following code to do so, and it's displaying correctly. However, the interactivity isn't working. Nothing happens when I brush over features. I've added a console.log statement (props.ntaname) to find what can be going wrong, but this has added some more questions:
function setEnumerationUnits(manhattan, map, path, colorScale){
//add Manhattan NTAs to map
var manhattan = map.selectAll(".manhattan")
.data(manhattan)
.enter()
.append("path")
.attr("class", function(d){
return "manhattan " + d.properties.ntacode;
})
.attr("d", path)
.style("fill", function(d){
return choropleth(d.properties, colorScale);
})
.on("mouseover", highlight);
//add style descriptor to each path
var desc = manhattan.append("desc")
.text('{"stroke": "#000", "stroke-width": "0.5px"}');
};
. . .
//function to create coordinated bar chart
function setChart(csvData, colorScale){
//create a second svg element to hold the bar chart
var chart = d3.select("body")
.append("svg")
.attr("width", chartWidth)
.attr("height", chartHeight)
.attr("class", "chart");
//create a rectangle for chart background fill
var chartBackground = chart.append("rect")
.attr("class", "chartBackground")
.attr("width", chartInnerWidth)
.attr("height", chartInnerHeight)
.attr("transform", translate);
//set bars for each NTA
var bars = chart.selectAll(".bar")
.data(csvData)
.enter()
.append("rect")
.sort(function(a, b){
return b[expressed]-a[expressed]
})
.attr("class", function(d){
return "bar " + d.ntacode;
})
.attr("width", chartInnerWidth / csvData.length - 1)
.on("mouseover", highlight);
/* .on("mouseout", dehighlight)
.on("mousemove", moveLabel) */;
//add style descriptor to each rect
var desc = bars.append("desc")
.text('{"stroke": "none", "stroke-width": "0px"}');
//create a text element for the chart title
var chartTitle = chart.append("text")
.attr("x", 55)
.attr("y", 40)
.attr("class", "chartTitle");
//create vertical axis generator
// var yAxis = d3.svg.axis()
// .scale(yScale)
// .orient("left");
var yAxis = d3.axisLeft(yScale);
//place axis
var axis = chart.append("g")
.attr("class", "axis")
.attr("transform", translate)
.call(yAxis);
//create frame for chart border
var chartFrame = chart.append("rect")
.attr("class", "chartFrame")
.attr("width", chartInnerWidth)
.attr("height", chartInnerHeight)
.attr("transform", translate);
//set bar positions, heights, and colors
updateChart(bars, csvData.length, colorScale);
};
. . .
//function to highlight enumeration units and bars
function highlight(props){
//change stroke
var selected = d3.selectAll(props.ntaname)
.style("stroke", "blue")
.style("stroke-width", "2");
//console.log(d3.selectAll("." + props.ntaname).size())
console.log(props.ntaname)
//setLabel(props);
};
In the console, when I mouse over features, the map (enumeration units function) returns 'undefined' statements, and the chart returns the proper neighborhood names. Still, the features don't change as I'm expecting them to visually. How can I edit this code to make this work? Data in CSV Data in TopoJSON