D3和传单在Chrome/Safari和Firefox中返回不同的SVG

我将以最新版本的d3和传单为例，制作一张带有传单和d3的地图。我的代码中的某些内容导致d3为Chrome和FF 28中的SVG元素返回不同的值。这会导致FF中的点倾斜，FF在路径元素中具有不同的d值，在SVG元素中具有不同的变换属性

以下是Chrome的SVG：

以下是Firefox的SVG

下面是加载地图并投影点的代码。在最末端有一个函数

project

，它为Chrome和FF 28中的点返回不同的x值。我认为这一行造成了代码的整体问题。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行为Chrome（右x值）和firefox（错误x值）中相同的lat/long返回不同的x值

我曾在FF 27和FF 28中尝试过这种方法——这两个版本的firefox都会在第51行的点上返回不同（且不正确）的x值

---

我是否在传单或d3中遇到错误，或者我的代码是否存在问题？有解决办法吗？这里发生了什么？

问题是如何调用

d3.json

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

这是无效的。函数期望其第一个参数是URL字符串，而不是对象。在FF和webkit中，您可能会得到随机垃圾，这就是您的代码用来计算边界的原因

---

您是否正在尝试使用模板（即小胡子）来构建URL？如果是这样，您就忘记渲染模板了。

我通过以下示例完成了此操作：

以下是工作代码：

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();
});

---

如果删除添加的小更正，效果如何？@robertc如果删除更正，SVG元素的“平移”和“左边距”属性在chrome和FF中仍然不同，并且点仍然没有投影到FFR中的正确位置。添加的更正肯定会导致直接问题。您是否可以删除它并发布不同的SVG元素（作为标记，而不是图像！）。d3.js似乎不太可能在FF和webkit中产生不同的值。@StephenThomas查看我的编辑。修正并没有引起问题。我看到的差异在于左边距和x轴平移，这两个差异都来自使用传单API的

项目
函数。这些都与d3无关。有没有我遗漏的东西让你怀疑d3？@StephenTthomas，这些括号是一个jinja2模板——我想当它到达客户端时，它会被翻译成一个标准的URL字符串。在chrome/safari中，我没有收到垃圾——我认为这是一个问题。在使用D3将svg路径定义的对象放置在传单地图上的上下文中，我遇到了类似的问题。使用transform（）在PC上正确放置对象，但使用相同的浏览器和版本，在笔记本电脑上随机移动空间，就像您的示例中一样。对我有效的方法是确保svg路径是相对的，然后使用所需的lat/lng（当然转换为传单点）作为开头的“m”值。当时不需要转换，而且在PC和笔记本电脑上的位置都完全正确。肯定有一些奇怪的地方。。。