相关疑难解决方法(0)

我正在使用d3.js在svg中渲染世界地图(使用https://github.com/johan/world.geo.json/blob/master/countries.geo.json获取这些功能).我将渲染逻辑封装在Backbone View中.当我渲染视图并将其附加到DOM时,虽然在查看生成的HTML时正确生成了SVG标记,但浏览器中没有显示任何内容.当没有封装在Backbone.View中时,这会很好.这是我使用Backbone.view的代码:

/**
 * SVG Map view
 */
var MapView = Backbone.View.extend({
    tagName: 'svg',
    translationOffset: [480, 500],
    zoomLevel: 1000,

    /**
     * Sets up the map projector and svg path generator
     */
    initialize: function() {
        this.projector = d3.geo.mercator();
        this.path = d3.geo.path().projection(this.projector);
        this.projector.translate(this.translationOffset);
        this.projector.scale(this.zoomLevel);
    },

    /**
     * Renders the map using the supplied features collection
     */
    render: function() {
        d3.select(this.el)
          .selectAll('path')
          .data(this.options.featureCollection.features)
          .enter().append('path')
          .attr('d', this.path);
    },

    /**
     * Updates the zoom level
     */
    zoom: function(level) {
        this.projector.scale(this.zoomLevel = level);
    }, …

我有一个页面,通过jQuery动态地将SVG添加到页面:

grid.append($('<object>')
.load(function () {
    // do stuff
    alert('loaded')
})
.attr({
    id: 'tile',
    type: 'image/svg+xml',
    width: Math.round(tile_w),
    height: Math.round(tile_h),
    data: 'map/base.svg'
})
);

我需要访问SVG文档(将一个变量"推"到svg脚本上下文中),但必须为此加载SVG.我的问题是我没有让load事件工作.没有显示警报.

怎么做？

编辑:似乎jQuery只是阻止将"加载"事件绑定到非图像或文档元素,所以我只使用"官方"addEventListener()函数(不支持愚蠢的IE,但这不是问题为了我):

grid.append($('<embed>')
    .attr({
        id: 'tile' + i,
        type: 'image/svg+xml',
        width: Math.round(tile_w),
        height: Math.round(tile_h),
        src: 'map/base.svg'
     })
    .css({
        position: 'absolute',
        left: Math.round(p.x),
        top: Math.round(p.y)
    }).each(function (i){
        this.addEventListener ('load', function (e) {
            alert('loaded')
        })
    })
);