使用d3.js和svgs在Backbone.js中渲染

kum*_*oda 15 backbone.js d3.js

在backbone.js中,视图的渲染函数生成未附加的html,稍后可以将其附加到dom.

目前,我必须在HTML中有一个现有目标才能将svg附加到.然后我使用data/enter模式将元素插入到svg中.有没有办法让d3.js生成svg而不将它附加到dom?

var svg = d3.select("#target").append('svg')
    .attr("viewBox","0 0 100 100"); 

svg.selectAll("circle")
    .data(data)
    .enter().append("circle")
        .attr("r", 10)
        .style("fill", "black");
Run Code Online (Sandbox Code Playgroud)

或者,是否可以为d3提供一个未附加的dom元素来附加内容?像这样的东西?D3.js文档建议select可以接受节点,但以下内容对我也不起作用

var svg = d3.select(this.$el).append('svg')  // Uncaught TypeError: Object [object Object] has no method 'appendChild' 
    .attr("viewBox","0 0 100 100");     

svg.selectAll("circle")
    .data([1,2,3])
    .enter().append("circle")
        .attr("r", 10)
        .style("fill", "black");
Run Code Online (Sandbox Code Playgroud)

kum*_*oda 12

我发现这篇文章中的答案SVG无法正确呈现为骨干视图

d3.select(this.el) 
Run Code Online (Sandbox Code Playgroud)

诀窍!

  • 是的,d3无法选择jquery对象.`d3.select(this.$ el [0])`也应该有效. (3认同)