Неопределенные свойства в TopoJSON - PullRequest
Новая
       21

Неопределенные свойства в TopoJSON

0 голосов
/ 17 апреля 2019

Я работаю над картой, где объекты будут выделяться при наведении на них курсора. Я использую следующий код для этого, и он отображается правильно. Тем не менее, интерактивность не работает. Ничего не происходит, когда я закрашиваю черты лица. Я добавил оператор 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

...