Javascript 使用D3.js迭代Json对象并将数据添加到工具提示

我正在尝试进行一点数据可视化，我正在努力在工具提示中显示数据

我想在地图上显示城市，并用工具提示（鼠标悬停）显示每个城市的数据

以下是我的一个Json文件（cities.Json）：

我可以在地图上显示城市和空白的工具提示

我希望在城市上每次鼠标悬停时，工具提示都会显示该城市“Techno”对象的所有数据

例如，鼠标悬停在Paris上：工具提示出现并显示“Technologies:SQL=5%，C=5%，PHP=5%”

这是我的Js文件：

const svg = d3.select("#map");
//...etc

// load data
var franceMap = d3.json("static/departments.json");
var cities = d3.json("static/cities.json");

// Append a DIV for the tooltip
var div = d3
  .select("body")
  .append("div")
  .attr("class", "tooltip")
  .style("opacity", 0);

Promise.all([franceMap, cities]).then(function (values) {
  svg.selectAll("path").data(values[0].features).enter()
  //...etc

  // draw points
  svg.selectAll("circle").data(values[1]).enter().append("circle")
    //...etc
    
  // add labels and config the tooltip
  svg.selectAll("text")
      .data(values[1])
      .enter()
      //...etc

      .on("mouseover", function (d) {
        div.transition().duration(200).style("opacity", 0.9);
        div.html("Technologies : ") // Here is the code I'm looking for  
    // I want to iterate on the "Techno" object of the json file and add all 
    //its keys and values to the tooltip 
    
          .style("left", d3.event.pageX + 30 + "px")
          .style("top", d3.event.pageY - 30 + "px")
      })
      .on("mouseout", function (d) {
        //...etc
      });
});

谢谢你的帮助

const svg = d3.select("#map");
//...etc

// load data
var franceMap = d3.json("static/departments.json");
var cities = d3.json("static/cities.json");

// Append a DIV for the tooltip
var div = d3
  .select("body")
  .append("div")
  .attr("class", "tooltip")
  .style("opacity", 0);

Promise.all([franceMap, cities]).then(function (values) {
  svg.selectAll("path").data(values[0].features).enter()
  //...etc

  // draw points
  svg.selectAll("circle").data(values[1]).enter().append("circle")
    //...etc
    
  // add labels and config the tooltip
  svg.selectAll("text")
      .data(values[1])
      .enter()
      //...etc

      .on("mouseover", function (d) {
        div.transition().duration(200).style("opacity", 0.9);
        div.html("Technologies : ") // Here is the code I'm looking for  
    // I want to iterate on the "Techno" object of the json file and add all 
    //its keys and values to the tooltip 
    
          .style("left", d3.event.pageX + 30 + "px")
          .style("top", d3.event.pageY - 30 + "px")
      })
      .on("mouseout", function (d) {
        //...etc
      });
});