المسار لا يظهر في د 3.شبيبة توبوجسون الرسم البياني

StackOverflow https://stackoverflow.com//questions/25062902

سؤال

أحاول رسم خريطة باستخدام توبوجسون لذلك اتبعت هذا المثال

لكنني لا أحصل على أي شيء مرسوم.

وهنا ما كتبته

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
<style>

path {
  fill: #ccc;
  stroke: #fff;
  stroke-width: .5px;
}

path:hover {
  fill: red;
}

</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>

var width = 960,
    height = 500;

var path = d3.geo.path();

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

  d3.json("tunisia.json", function(error, topology) {

  console.log(topology);

  svg.selectAll("path")
      .data(topojson.feature(topology, topology.objects.governorates).features)
      .enter().append("path")
      .attr("d", path);
});

</script>

</body>
</html>

بعد بعض التصحيح اتضح أن المسار في حالتي يضاف على النحو التالي: 

<svg width="960" height="500">
<path></path>
<path></path>
</svg>

في حين أنه يجب أن يكون عادة مثل هذا: 

<svg width="960" height="500">
 <path d="M183.85631949544694,17.16574961388676L184.64695256075555,18.261986556132797L184.24437929962187,21.436416964644536L184.9109502450185,22.72190753660925L183.42733139583214,23.600229178621248L181.43637647772152,23.38526266060535L162.4858998398068,18.04698631290296L162.95134674943927,16.322885588815097L161.24381018256219,15.20848145955324L160.04585728433227,11.701769628478132L161.0879861841512,10.793553936506555L172.9773901748378,14.256236175137701Z"></path>
</svg>

هنا هو البيانات أنا باستخدام:https://raw.githubusercontent.com/mtimet/tnacmaps/master/topojson/tunisia.json

هل يمكنك التحقق من الخطأ الذي أفعله

هل كانت مفيدة؟

المحلول

لا توجد مشكلة مع ملف جسون الخاص بك.

المشكلة التي تواجهها هي أنك لا تحدد إسقاطا لك d3.geo.path() مما يعني أنه يعود إلى الافتراضي.وفقا للوثائق المرتبطة أعلاه:

#d3.geo.path()

إنشاء مولد مسار جغرافي جديد مع الإعدادات الافتراضية:ال ألبيرسوسا الإسقاط ونصف قطر نقطة 4.5 بكسل.

البيانات الجغرافية الخاصة بك هي لخريطة تونس ، لذلك لن يحتوي إسقاط ألبيرسوسا على أي من الإحداثيات في مجموعة البيانات الخاصة بك.هذا هو السبب في أن بيانات المسار فارغة في الإخراج الخاص بك.

لإصلاح هذا ، تحتاج إلى تحديد الإسقاط.يمكنك القيام بذلك عند تحميل البيانات الخاصة بك ، ويمكنك استخدام d3.geo.bounds(), ، يمر في الخاص بك featureCollection للعثور على الحدود الجغرافية لبياناتك.

var featureCollection = topojson.feature(topology, topology.objects.governorates);
var bounds = d3.geo.bounds(featureCollection);

ثم من هذه الحدود ، يمكنك حساب مركز مجموعة الميزات الخاصة بك:

var centerX = d3.sum(bounds, function(d) {return d[0];}) / 2,
    centerY = d3.sum(bounds, function(d) {return d[1];}) / 2;

ثم يمكنك استخدام هذا لتوسيط الإسقاط الخاص بك.على سبيل المثال ، إذا كنت تستخدم إسقاط مركاتور ، فيمكنك القيام بما يلي:

var projection = d3.geo.mercator()
  .scale(3000)
  .center([centerX, centerY]);

اختيار مقياس 3000 هو تعسفي ، يبدو فقط للعمل بشكل جيد في هذه الحالة ، قرص إلى كل ما يعمل بالنسبة لك.

وأخيرا ، تحتاج إلى تعيين .projection() من الخاص بك path إلى الإسقاط الذي قمت به ، قبل إنشاء مسارات سفغ في الواقع.

path.projection(projection);

svg.selectAll("path")
  .data(featureCollection.features)
  .enter().append("path")
  .attr("d", path);

هنا هو مثال عملي باستخدام البيانات الخاصة بك.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top