4

我正在尝试在反应组件中使用 d3 创建世界地图。我想将数据作为道具发送到地图。我相信我需要获取 topoJSON 文件并在应用程序组件中创建几何图形的 geoJSON 文件（数组），然后将其发送到地图组件。我正在这样做：

topojson.feature(fullTopoData, geometriesFromTheTopoData)

看起来转换后的 geoJSON 是一个具有必要坐标的数组。我将其从父应用程序组件发送到子地图绘制组件。

在我的地图组件中将路径附加到我的 svg 时，它不会绘制任何内容。控制台显示一个 svg 已被渲染，仅此而已。

我使用本教程作为我的文件结构的基础：http: //nicolashery.com/integrating-d3js-visualizations-in-a-react-app/

这就是我试图绘制地图的方式：

var svg = d3.select(elemPassedFromParent).append('svg')
    .attr('width', 760)
    .attr('height', 700)

var map = svg.selectAll('g')
    .data(dataPassedAsPropFromParent)
    .enter()
    .append('g')

var projection = d3.geo.mercator();
var path = d3.geo.path().projection(projection);

var countries = map.append('path')
    .attr('d', path)
    .attr('class', 'area')
    .attr('fill', 'red');

我无法将地理数据对象发送到子组件进行渲染吗？它需要是完整的 topoJSON 文件吗？我想通过仅通过道具传递数据来尽可能保持这种反应。

4

0 回答 0