d3.js 如何在渲染的Map中查找与元素关联的数据[duplicate]

zbdgwd5y 于 2022-11-12 发布在其他

关注(0)|答案(2)|浏览(113)

此问题在此处已有答案：

How can I pass the index from javascript map function to the onclick function?（5个答案）
6个月前关闭。
我有一个Map，我正在尝试使其具有交互性，以便当用户单击某个特定地区时，它会显示有关该地区的一些数据（x/y/z类别中的人口百分比、人口大小等）。数据集包括所有这些数据以及地理数据。但是，在渲染Map后，我在事件对象中找不到该地区的数据。下面是Map的结构（它位于React组件中）：

function Map({ data, selectedDistricts }) {
  .
  .
  .
  const districtPathGenerator = d3.geoPath(projection)
  function handleClick(e) {
    console.log(e) // <-- how to display the data associated with the clicked-on district?
  }
  return (
    <div ref={ref}>
      <svg width="500px" height="450px">
        <g>
          {data.map((district) => {
            return (
              <path
                d={districtPathGenerator(district)}
                onClick={(e) => handleClick(e)}
              >
              </path>
            )
          })}
        </g>
      </svg>
    </div>
  )
}

d3.js

来源：https://stackoverflow.com/questions/72296956/how-to-find-the-data-associated-with-elements-in-a-rendered-map

2条答案

按热度按时间

pbwdgjma1#

试试看

function Map({ data, selectedDistricts }) {
  .
  .
  .
  const districtPathGenerator = d3.geoPath(projection)
  function handleClick(e, district) {
    console.log(e, district) // <-- how to display the data associated with the clicked-on district?
  }
  return (
    <div ref={ref}>
      <svg width="500px" height="450px">
        <g>
          {data.map((district) => {
            return (
              <path
                d={districtPathGenerator(district)}
                onClick={(e) => handleClick(e, district)}
              >
              </path>
            )
          })}
        </g>
      </svg>
    </div>
  )
}