D3：D3のJSON文字列からフィーチャーをロードする方法

JSON.parse（string）メソッドを使用してJSONストリングからJSONオブジェクトを作成する例が多数ありますが、使用時にこのオブジェクトのフィーチャーをロードする方法JSON.parseは私には分かりません。たとえば、コピーと（JSONファイル：canada.topo.json）下のリンクからテキストを貼り付ける：D3：D3のJSON文字列からフィーチャーをロードする方法

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 
    path { 
    stroke: white; 
    stroke-width: 0.25px; 
    fill: grey; 
    } 
</style> 
<body> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> 
<script src="https://d3js.org/topojson.v1.min.js"></script> 
<script> 
    var json = "jsonfile" 
    jobj = JSON.parse(json) 
    var width = 960, 
    height = 1160; 

    var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height); 
    //what to do next is my problem 
    //A simple way to just project a map typically is with the following, which fails in this case: 
    function(error, us) { 
    svg.append("path") 
    .data(jobj) 
    //How do I load the features from the jobj object?? 
    .feature(us, us.objects.Canada).features 
    .attr("d", d3.geo.path().projection(d3.geo.mercator())); 
    } 
    //As a side point, this does not throw any errors, but nothing happens of course as there are no features 
    var svg = d3.select("body") 
    d3.select('.countries').selectAll('path') 
    .data(jobj) 
    svg.append("path") 
    .attr("d", d3.geo.path().projection(d3.geo.mercator())); 
</script>

はQUESTION：どのように私はD3にjobjの機能をロードしない、私は次のコードを持っていますか？

https://github.com/returnOfTheYeti/CanadaJSON/blob/master/canada.topo.json

出典

2017-11-28 Rob

https://github.com/returnOfTheYeti/CanadaJSON/blob/master/canada.topo.jsonそれはgithubのページへのリンクです。このリンクではなく、あなたのJSONファイル自体に。

このURLを使用する必要があります - https://raw.githubusercontent.com/returnOfTheYeti/CanadaJSON/master/canada.topo.json "Raw"ボタンをクリックすると、任意のファイルのこのURLを取得できます。

d3.json('https://raw.githubusercontent.com/returnOfTheYeti/CanadaJSON/master/canada.topo.json', function(data) { 
    console.log(data); // <= object with loaded data 
    console.log(topojson.feature(data, data.objects.Canada).features); // <= features 
});

チェックthis jsFiddle：あなたはこのファイルをこのようにロードすることができd3.json方法とそう

。

更新：場合

あなたには、いくつかの変数に格納されたJSON文字列を持っているときに機能を取得し、この方法でマップを作成することができます。your dataと

var json = `...json string...`; 

var jobj = JSON.parse(json); // parse string 

var width = 960, 
    height = 1160; 

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height); 

// get features array with topojson.feature method, bind it with .data method and create map 
svg.selectAll("path") 
    .data(topojson.feature(jobj, jobj.objects.Canada).features) 
    .enter() 
    .append("path") 
    .attr("d", d3.geo.path().projection(d3.geo.mercator()));

例。

出典

2017-11-28 07:59:09

これは有益な情報ですが、私はOPが後になっているのではないかと心配しています。私は、 '.features'プロパティが何であるか、そしてそれをどう取得するかについてより詳しく考えています。 – altocumulus

@altocumulusあなたはそう思いますか？たぶん私は間違って質問を理解する。私の英語はあまり良くはありません。 OPが彼の質問に関係のないこの答えを確認したら、私はそれを削除します。 –

これは参考になりますが、接続性の悪いコンピュータの場合はJSON.parse（URLではなく文字列として）を特にロードしています。私は私の質問を明確にします – Rob

D3：D3のJSON文字列からフィーチャーをロードする方法

答えて

関連する問題