/ / नए डेटा के साथ D3.js डेटा मैप शुरू करें - json, d3.js

नए डेटा के साथ D3.js डेटा मैप शुरू करें - json, d3.js

मैं मूल उदाहरण के साथ जा रहा हूं यहाँ सिवाय मुझे नक्शा आधारित अपडेट करने में सक्षम होने की आवश्यकता हैनए डेटा पर (एक json फ़ाइल।) मैं डेटा को सीधे डेटामैप ऑब्जेक्ट के अंदर लोड करने का एक तरीका नहीं ढूंढ सकता, इसलिए मैं इसे D3.json के साथ लोड कर रहा हूं और मैप को अपडेट करने के लिए कमांड का उपयोग कर रहा हूं। किसी कारण से popupTemplate फ़ंक्शन अशक्त डेटा ऑब्जेक्ट प्राप्त कर रहा है और मैं इसे ठीक करने का तरीका नहीं जानता।

ऐसा करने का सबसे अच्छा तरीका क्या है?

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://datamaps.github.io/scripts/datamaps.world.min.js"></script>
<script src="http://datamaps.github.io/scripts/topojson.js"></script>
<div id="container" style="position: relative; width: 500px; height: 300px;"></div>

<script>
var data;

var map = new Datamap({
element: document.getElementById("container"),
fills: {
HIGH: "#afafaf",
LOW: "#123456",
MEDIUM: "blue",
UNKNOWN: "#FFFFFF",
defaultFill: "green"
},
geographyConfig: {
popupTemplate: function(geo, data) {
console.log(data)
return ["<div class="hoverinfo"><strong>",
"Number of things in " + geo.properties.name,
": " + data[geo.id].numberOfThings,
"</strong></div>"].join("");
}
}
});
map.legend();


d3.json("path/to/data.json", function(error, json) {
if (error) return console.warn(error);

data = json;
map.updateChoropleth(data);
});
</script>

यह मेरी जेसन फ़ाइल है:

{
"IRL": {
"fillKey": "LOW",
"numberOfThings": "2002"
},
"USA": {
"fillKey": "MEDIUM",
"numberOfThings": "10381"
}
}

डिबग करना आसान बनाने के लिए, मैंने इसे रखा jsfiddle

उत्तर:

उत्तर № 1 के लिए 1

मुझे सीधे डेटा लोड करने में समस्या नहीं हुईडाटामाप के अंदर। किसी भी स्थिति में, मैंने एक डेटा अपडेट का अनुकरण भी किया ... रंग अपडेट हो गया, लेकिन मूल्य (नंबरऑफिंग) नहीं। ट्यूटोरियल में उदाहरण में, यह स्पष्ट नहीं है कि यह किया जा सकता है, हालांकि यह समझ में आएगा कि किसी को मूल्यों को अपडेट करने में सक्षम होना चाहिए।

मैं आपका साथ छोड़ रहा हूं बेला मेरे प्रयोग के परिणाम दिखा रहा है।

नोटों की एक जोड़ी:

  • मेरा मानना ​​है कि आपका पॉपअप नहीं दिखा रहा था क्योंकि इसकी रिटर्न स्ट्रिंग की जरूरत है होने के लिए data.numberOfThings.
  • अगर मैं गलती से नहीं खेलता हूं जब मैंने इसके साथ खेला था, यदि आपके पास किसी देश के लिए डेटा नहीं है, तो पॉपअप अपडेट नहीं किया जाता है और डेटा के साथ अंतिम देश के लिए समान मूल्य प्रदर्शित होता है।

उत्तर № 2 के लिए 1

@ कैयरश, यहाँ दो समस्याएं हैं:

  1. आप datamaps.github.io साइट से डेटामैप्स का उपयोग कर रहे हैं, जिसे मैं सलाह नहीं देता हूं क्योंकि मैं विश्वसनीयता (अपटाइम) या बैकवर्ड संगतता की गारंटी नहीं दे सकता। आप इसे से डाउनलोड करने के लिए सर्वश्रेष्ठ हैं गिथब प्रोजेक्ट पेज
  2. data जीता "t देश के नाम के साथ एक संपत्ति है, इसे इस तरह एक्सेस किया जाना चाहिए data.numberOfThings.

यहां आपके द्वारा आपूर्ति किए गए कोड का एक कार्यशील संस्करण है