d3 topojson некорректный тип данных в webpack/response

Question

Привет Я пытаюсь отобразить карту с D3 в проекте response/webpack. Я использую react-d3-wrap, так что я могу поставить код d3 прямо в проект реакции. Кроме того, я беру данные, используя webpack, как статический файл. Делая это, я получаю сообщение об ошибке, что позволяет предположить, что типы данных файла topojson неверны:

Эта проблема возникает, когда d3 встречает string that should be an int. Однако проверка данных на консоли указывает, что данные действительно являются int, а не строкой.

Кроме того, я использую topojson для обработки файла, а не кидает ошибку (что я бы ожидать, если координаты topojson встречается строка.)

Вы можете найти topojson here (Примечание, перейдя по этой ссылке скачивает JSON, если вы не в порядке с этим, то не нажмите.)

Код:

import d3Wrap from 'react-d3-wrap'; 
import * as React from 'react'; 
import * as d3 from 'd3'; 
import topojson from 'topojson'; 
var topodata = require('../static/topo_uscd.json'); 

const GerryD3 = d3Wrap({ 
    update(svg, data, options) { 

     var width = svg.width, height = svg.height; 

     var projection = d3.geoAlbersUsa() 
      .scale(1200) 
      .translate([width/2, height/2]); 

     var path = d3.geoPath() 
      .projection(projection); 

     var d3svg = d3.select(svg); 

     var g = d3svg.append("g"); 

     var draw = function (us) { 
      g.selectAll("path") 
       .data(topojson.feature(us, us.objects.uscd).features) 
       .enter().append("path") 
       .attr("class", "district") 
       .attr("d", path) 
       .attr("fill", "#adadad"); 
      g.append("path") 
       .datum(topojson.mesh(us, us.objects.uscd, function (a, b) { 
        return a !== b; 
       })) 
       .attr("class", "boundary") 
       .attr("d", path); 
     }(data); 

     d3.select(self.frameElement).style("height", height + "px"); 
    } 
}); 

export default class Gerrymandering extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

    render() { 
     return (
      <GerryD3 data={topodata} width={document.documentElement.clientWidth - 250} height={document.documentElement.clientHeight-150}/> 
     ) 
    } 
} 

Что здесь общего?

EDIT:

Я сделал отдельный проект, используя один и тот же код, за исключением того, я использую d3.json запросить файл topojson - и это работает! Это подсказывает мне, что каким-то образом использование require в некотором роде возится с данными.

Answer 1

Проблема возникла с использованием линии:

var width = svg.width, height = svg.height; 

Оказывается, что svg, который получает передается в SVGAnimatedLength имеет для его объекта ширина/высота вместо номера. Произошла ошибка при преобразовании проекции с этими объектами.