使用d3.js和svg在Backbone.js中进行渲染

Question

使用d3.js和svg在Backbone.js中进行渲染

backbone.jsd3.js

15

在backbone.js中，一个视图的渲染函数生成未附加到dom的HTML，可以稍后再将其附加到dom。目前，我必须在HTML中拥有一个现有的目标才能将svg附加到该目标。然后，我使用数据/输入模式将元素插入到svg中。是否有一种方法可以让d3.js生成未附加到dom的svg？

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");

另外，是否有可能向 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");

- kumikoda

2

你尝试过 d3.selectAll([this.el]) 吗？D3 可能无法处理 jQuery 对象，需要一个真正的数组。 - mu is too short

我已经尝试过了（不起作用）。顺便说一下，我参考的d3文档表明，d3与Jquery对象相容。https://github.com/mbostock/d3/wiki/Selections#wiki-d3_select -->“这些方法也可以接受节点，这对于与jQuery或开发工具等第三方库集成非常有用。” - kumikoda

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kumikoda · Accepted Answer

我在这篇文章中找到了答案 SVG not rendering properly as a backbone view

d3.select(this.el)

能解决问题！