d3 topojson webpack/reactのデータ型が正しくありません

Question

こんにちは、反応/ WebpackプロジェクトでD3を使って地図をレンダリングしようとしています。私はreact-d3-wrapを使用しているので、私はd3コードを反応プロジェクトに直接入れることができます。さらに、私はwebpackに静的なファイルとしてそれを必要とすることを介してデータを取得しています。 d3はstring that should be an intに遭遇したとき

、この問題が発生します。これをやっている間、私はtopojsonファイルのデータ型が間違っていることを示唆しているエラーを取得しています。しかし、コンソールのデータを調べると、データは実際には文字列ではなく、文字列であることがわかります。さらに

は、私は、ファイルを処理するためにtopojsonを使用していて、それがエラーを投げていない（topojson遭遇した文字列が座標た場合、私が期待するものである。）

あなたは見つけることができますtopojson here（注意、このリンクをクリックすると、あなたはそれでOKでない場合は、クリックしていけない、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：

私はtopojsonファイルを要求するためにd3.jsonを使用除いて同じコードを使用して別のプロジェクトを作った - そしてそれは働きます！これは、何とかrequireを使用していることが何らかの形でデータを乱していることを示唆しています。

Answer 1

問題はラインで来た：

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

それはに渡されるsvgはそれの幅/高さのオブジェクトの代わりに、数のSVGAnimatedLengthを持っていることが判明しました。これらのオブジェクトで投影を翻訳すると、エラーが発生しました。