O SVG não rendendo bem como uma espinha dorsal vista
-
11-12-2019 - |
Pergunta
Eu estou usando d3.js para compor um mapa do mundo em svg (usando https://github.com/johan/world.geo.json/blob/master/countries.geo.json para os recursos).Eu sou encapsular a lógica de renderização em um Backbone de Vista.Quando eu processar a visão e anexá-lo para o DOM, não exibe nada no meu navegador, o que o SVG marcação corretamente é gerado quando olhar para o HTML gerado.Isso faz bem, quando não encapsular dentro de uma Espinha dorsal.Visualizar.Aqui está o meu código usando Espinha dorsal.visão:
/**
* 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);
},
/**
* Updates the translation offset
*/
pan: function(x, y) {
this.projector.translate([
this.translationOffset[0] += x,
this.translationOffset[1] += y
]);
},
/**
* Refreshes the map
*/
refresh: function() {
d3.select(this.el)
.selectAll('path')
.attr('d', this.path);
}
});
var map = new MapView({featureCollection: countryFeatureCollection});
map.$el.appendTo('body');
map.render();
Aqui está o código que funciona, sem o uso de Backbone.Visualizar
var projector = d3.geo.mercator(),
path = d3.geo.path().projection(projector),
countries = d3.select('body').append('svg'),
zoomLevel = 1000;
coords = [480, 500];
projector.translate(coords);
projector.scale(zoomLevel);
countries.selectAll('path')
.data(countryFeatureCollection.features)
.enter().append('path')
.attr('d', path);
Eu também anexada uma imagem do gerada SVG marcação.Alguma idéia do que poderia estar acontecendo de errado aqui?
Edit - é Aqui substituído fazer o método que acabamos de resolver isso, por solicitação:
/**
* Custom make method needed as backbone does not support creation of
* namespaced HTML elements.
*/
make: function(tagName, attributes, content) {
var el = document.createElementNS('http://www.w3.org/2000/svg', tagName);
if (attributes) $(el).attr(attributes);
if (content) $(el).html(content);
return el;
}
Solução
O problema é que o "svg" elemento requer um espaço de nomes.D3 faz isso automaticamente;quando você acrescentar um "svg" elemento, utiliza o espaço de nomes "http://www.w3.org/2000/svg".Para obter detalhes, consulte src/core/ns.js.Espinha dorsal, infelizmente, não aparecem para apoiar namespace elementos.Se você deseja alterar o visualizar.fazer o método.Em seguida, você precisa de um namespaceURI propriedade em seu modo de exibição para definir o namespace apropriado, ou simplesmente fazê-lo automaticamente para SVG elementos de coerência com o HTML5 analisador.
De qualquer forma, uma simples solução para o seu problema é para embrulhar o SVG em um elemento DIV, e, em seguida, usar D3 para criar o elemento SVG.
Outras dicas
Você simplesmente pode definir o modo de exibição do elemento na função de inicialização da seguinte maneira:
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]
);
}
);
Este tem a vantagem de ser explicite.
Confira http://jsfiddle.net/nocircleno/QsEp2/ a partir de 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);
}
}
});