SVG لا تجتاح بشكل صحيح كمنظر العمود الفقري

Question

أنا أستخدم D3.js لتقديم خريطة للعالم في SVG (باستخدام https://github.com/johan/world.geo.json/blob/master/countries.geo.json للميزات).أنا أحبط منطق التقديم في عرض العمود الفقري.عندما أجد الرأي وإرفاقه على DOM، لا يوجد شيء يعرض في متصفحي، على الرغم من أن ترميز SVG يتم إنشاؤه بشكل صحيح عند النظر إلى HTML الذي تم إنشاؤه.هذا يجعل هذا جيدا عند عدم التغليف داخل backbone.view.إليك الرمز الخاص بي باستخدام backbone.view: giveacodicetagpre.

إليك الرمز الذي يعمل، دون استخدام backbone.view giveacodicetagpre.

لقد أرفقت أيضا لقطة شاشة لعلامة SVG التي تم إنشاؤها.أي فكرة عما يمكن أن يحدث خطأ هنا؟

Edit - إليك الطريقة التي انتهت عملية تجاوزها والتي انتهت عن حل هذا، لكل طلب: giveacodicetagpre.

Answer 1

The issue is that the "svg" element requires a namespace. D3 does this for your automatically; when you append an "svg" element, it uses the namespace "http://www.w3.org/2000/svg". For details, see src/core/ns.js. Backbone, unfortunately, does not appear to support namespaced elements. You'd want to change the view.make method. Then you'd need a namespaceURI property on your view to set the appropriate namespace, or just do it automatically for SVG elements for consistency with the HTML5 parser.

At any rate, a simple fix for your problem is to wrap your SVG in a DIV element, and then use D3 to create the SVG element.

Answer 2

You could simply set the view's element in the initialize function as follows:

Backbone.View.extend({
    // This is only for informaiton. The node will
    // be raplaced in the initialize function.
    tagName: 'svg',

    initialize: function () {
        this.setElement(
            d3.select($('<div/>')[0]).append('svg')[0]
        );
    }
);

This has the advantage of being explicite.

Answer 3

Check this out http://jsfiddle.net/nocircleno/QsEp2/ from http://nocircleno.com/blog/svg-with-backbone-js/

Backbone.View.extend({
  nameSpace: "http://www.w3.org/2000/svg",
  _ensureElement: function() {
     if (!this.el) {
        var attrs = _.extend({}, _.result(this, 'attributes'));
        if (this.id) attrs.id = _.result(this, 'id');
        if (this.className) attrs['class'] = _.result(this, 'className');
        var $el = $(window.document.createElementNS(_.result(this, 'nameSpace'), _.result(this, 'tagName'))).attr(attrs);
        this.setElement($el, false);
     } else {
        this.setElement(_.result(this, 'el'), false);
     }
 }
});