Undefined properties in TopoJSON

时间:2019-04-17 02:42:03

标签: javascript d3.js mouseover

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

0 个答案:

没有答案