D3 والنشرة تعرض صور SVG مختلفة في Chrome/Safari وFirefox

Question

أنا أتابع هذا مثال لإنشاء خريطة باستخدام المنشور وd3، باستخدام أحدث الإصدارات من d3 والنشرة.هناك شيء ما في الكود الخاص بي يتسبب في قيام d3 بإرجاع قيم مختلفة لعناصر SVG في Chrome وFF 28.يؤدي هذا إلى انحراف النقاط في FF، والتي لها قيم d مختلفة في عناصر PATH بالإضافة إلى خصائص تحويل مختلفة في عناصر SVG.

إليك ملف SVG لمتصفح Chrome:

<svg width="1049711" height="1802" transform="translate(127,1079)" style="margin-left: -127px; margin-top: -1079px;">
<g class="leaflet-zoom-hide" transform="translate(127,1079)">
<path class="nora f" id="1383_ST_BERNARD_AVE" lat="29.970905251" long="90.064206456" d="M287,210m0,2a2,2 0 1,1 0,-4a2,2 0 1,1 0,4z"></path>
<path class="fixed f" id="7400_ADVENTURE_AVE" lat="30.0599104550001" long="89.9260116889999" d="M1092,-389m0,2a2,2 0 1,1 0,-4a2,2 0 1,1 0,4z"></path>

هنا هو SVG لمتصفح فايرفوكس

<svg width="1049711" height="1802" style="margin-left: -97px; margin-top: -1079px;" transform="translate(97,1079)">
<g class="leaflet-zoom-hide" transform="translate(97,1079)">
<path class="nora f" id="1383_ST_BERNARD_AVE" lat="29.970905251" long="90.064206456" d="M317,210m0,2a2,2 0 1,1 0,-4a2,2 0 1,1 0,4z"/>
<path class="fixed f" id="7400_ADVENTURE_AVE" lat="30.0599104550001" long="89.9260116889999" d="M1122,-389m0,2a2,2 0 1,1 0,-4a2,2 0 1,1 0,4z"/><path class="nora f" id="4170_OLD_GENTILLY_RD" lat="30.0024662600001" long="90.0401487569999" d="M457,-3m0,2a2,2 0 1,1 0,-4a2,2 0 1,1 0,4z"/>

هذا هو الكود الذي يقوم بتحميل الخريطة ويعرض النقاط.في النهاية هناك وظيفة project تقوم بإرجاع قيمة x مختلفة للنقطة في Chrome وFF 28.أعتقد أن هذا السطر يخلق المشكلة العامة في الكود.يتم إيقاف قيمة x بقيم مختلفة في أوقات مختلفة، لذلك من الصعب كتابة تصحيح.

    var map = new L.Map("map", {center: [29.95, -90.05], zoom: 13, minZoom:10, maxZoom:18})
        .addLayer(new L.tileLayer('http://{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png'));

    var svg = d3.select(map.getPanes().overlayPane).append("svg"),
       g = svg.append("g").attr("class", "leaflet-zoom-hide");

    //these brackets are jinja2 template syntax. They eventually return 'static/out.json' 
    d3.json('out.json') }}', function(collection) {
     var bounds = d3.geo.bounds(collection),
      path = d3.geo.path().projection(project).pointRadius(function (d) {return 2});
    console.warn(path)

     var feature = g.selectAll("path")
      .data(collection.features)
    .enter().append("path").attr("class", function(d){
      return d.properties.category + " " + d.properties.investigates;;
    }).attr("id", function(d){
      return d.geometry.address;
    }).attr("lat", function(d){
       return Math.abs(d.geometry.coordinates[1]);
    }).attr("long", function(d){
       return Math.abs(d.geometry.coordinates[0]);
    });
    $(".t").on("click", function(e) {

        var adr = "/" + this.id;
        showDialog(adr);
    });

      map.on("viewreset", reset);
      reset();


      // Reposition the SVG to cover the features.
      function reset() {
        console.warn(bounds)
        var bottomLeft = project(bounds[0]),
            topRight = project(bounds[1]);


    svg .attr("width", topRight[0] - bottomLeft[0])
        .attr("height", bottomLeft[1] - topRight[1])
        .style("margin-left", bottomLeft[0] + "px")
        .style("margin-top", topRight[1] + "px").attr("transform", "translate(" + -bottomLeft[0] + "," + -topRight[1] + ")");

     g .attr("transform", "translate(" + -bottomLeft[0] + "," + -topRight[1] + ")");

    feature.attr("d", path)
  }

      // Use Leaflet to implement a D3 geographic projection.
      function project(x) {
        var point = map.latLngToLayerPoint(new L.LatLng(x[1], x[0]));
        return [point.x, point.y];
      }          
      });

أنا اقترح هذا باعتباره خطأ إلى النشرة.إذا جربت الكمان في FF 28 وChrome، فسترى أن السطر 51 يُرجع قيم x مختلفة لنفس خطوط العرض/الطول في Chrome (قيمة x اليمنى) وفايرفوكس (قيمة x خاطئة)

لقد جربت هذا الكمان في FF 27 و FF 28 - كل إصدار من هذه الإصدارات من Firefox يُرجع قيمة x مختلفة (وغير صحيحة) للنقطة الموجودة في السطر 51.

هل واجهت خطأً في النشرة أو d3 أم أن هناك مشكلة في الكود الخاص بي؟ايوجد اي عمل في هذه المنطقه؟ما الذي يحدث هنا؟

Answer 1

انتهى بي الأمر إلى تشغيل هذا باتباع هذا المثال: https://Gist.github.com/ZJONSSON/2957559

هنا هو رمز العمل:

var path = d3.geo.path().projection(function project(x) {
    var point = map.latLngToLayerPoint(new L.LatLng(x[1], x[0]));
    return [point.x, point.y];
}).pointRadius(function(d) {
    return 2;
});

/* Load and project/redraw on zoom */
d3.json("static/out.json", function(collection) {
    var feature = g.selectAll("path")
        .data(collection.features)
        .enter().append("path")
        .attr("class", function(d) {
            return d.properties.category + " " + d.properties.investigates + " " + d.properties.thumbnail;
        }).attr("id", function(d) {
            return d.properties.address;
        }).attr("lat", function(d) {
            return Math.abs(d.geometry.coordinates[1]);
        }).attr("long", function(d) {
            return Math.abs(d.geometry.coordinates[0]);
        })
        .attr("d", path);

    map.on("viewreset", function reset() {
        feature.attr("d", path);
    });
    loadThumbs();
});

Answer 2

المشكلة هي كيف تتصل d3.json.

d3.json('{{url_for('static', filename='out.json') }}', //...

غير صالح.ال d3.json تتوقع الدالة أن تكون المعلمة الأولى عبارة عن سلسلة عنوان URL، وليس كائنًا.في كل من FF وwebkit، من المحتمل أنك تحصل على بيانات عشوائية عشوائية وهذا ما يستخدمه الكود الخاص بك لحساب الحدود.

هل تحاول استخدام قالب (أي؟شارب) لإنشاء عنوان URL؟إذا كان الأمر كذلك، فأنت نسيت تقديم القالب.