javascript - TopoJSON 中的未定义属性

Question

我正在制作一张地图，当您将鼠标悬停在地图上时，地图上的要素会突出显示。我正在使用以下代码来执行此操作，并且它显示正确。但是，交互性不起作用。当我刷过功能时没有任何反应。我添加了一个 console.log 语句 (props.ntaname) 来查找可能出现的问题，但这又增加了一些问题：

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

在控制台中，当我将鼠标悬停在要素上时，地图（枚举单位函数）返回“未定义”语句，图表返回正确的邻域名称。尽管如此，这些功能并没有像我期望的那样在视觉上发生变化。如何编辑此代码以使其正常工作？ CSV中的 数据 TopoJSON中的数据

标签： javascriptd3.jsmouseover