Блог

Я создаю карту с использованием D3 и пытаюсь добавить к ней динамическое выделение. Например, при наведении курсора мыши на определенные объекты граница меняет цвет / вес. Я использую следующий код, чтобы попытаться выполнить это:

 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", function(d){
            highlight(d.properties);
        });

    //add style descriptor to each path
    var desc = manhattan.append("desc")
        .text('{"stroke": "#000", "stroke-width": "0.5px"}');
};
  

.
.
.

 //function to highlight enumeration units and bars
function highlight(props){
    //change stroke
    var selected = d3.selectAll("."   props.ntaname)
        .style({
            "stroke": "blue",
            "stroke-width": "2"
        });
    setLabel(props);
};
  

Я ожидаю увидеть очерченные объекты, когда я «пролистываю» их, но не повезло. Когда я смотрю на консоль, я получаю сообщения об ошибках типа: «не удается прочитать свойство ‘style’ null» и «не удается прочитать свойство ‘html’ null». Как я могу изменить это, чтобы отображалось выделение?

Вы должны передать функции все данные highlight , а не только одно свойство.

Итак, вместо:

   .on("mouseover", function(d){
      highlight(d.properties);
  });
  

Это должно быть:

   .on("mouseover", function(d){
      highlight(d);
  });
  

Или даже короче:

   .on("mouseover", highlight);
  

Наконец, поскольку вы не предоставили общий доступ к setLabel функции, я не знаю, требуется ли для этого свойство или все данные. Поэтому вы должны изменить это соответствующим образом.