d3 JS动态画布

Question

我试图通过d3.js将图表绘制到HTML5画布上。

我下面就如何从这里做一个例子： http://bocoup.com/weblog/d3js-and-canvas/

我定义我onLoad功能如下：

var jsonData = [1, 5, 6, 7, 9, 3, 10]; 

// add a Canvas element to our chart element 
// choosing canvas so we can have animations should we decide to 
var canvasElement = d3.select("#chart") 
    .append("canvas") 
    .attr("width", 800) 
    .attr("height", 575); 


// virtual container for our circles 
var inMem =document.createElement("customCircle"); 
var circleContainer = d3.select(inMem); 


// make the circles for each of the categories 
makeCircles(jsonData, circleContainer); 
drawCircles(canvasElement, circleContainer); 
}); 

而且makeCircles和drawCircles被定义为如下：

function makeCircles(data, circleContainer) { 
var databind =circleContainer.selectAll("customCircle.circle") 
           .data(data); 
databind.enter() 
    .append("customCircle") 
    .classed("circle", true) 
    .attr("x", (Math.random() * 800)) 
    .attr("y", function(d) { return d; }) 
    .attr("fillStyle", "#5cb85c"); 

}

function drawCircles(element, dataContainer) { 
console.log(dataContainer); 
var graphicsContext = element.node().getContext("2d"); 
graphicsContext.fillStyle = "#fff"; 
graphicsContext.rect(0, 0, 800, 575); 
graphicsContext.fill(); 

var elements = dataContainer.selectAll("customCircle.circle"); 
elements.each(function(d) { 
    var node = d3.select(this); 
    graphicsContext.beginPath(); 
    graphicsContext.fillStyle = node.attr("fillStyle"); 
    graphicsContext.arc(node.attr("x"), node.attr("y"), node.attr("size"), 0, (2 * Math.PI)); 
    graphicsContext.fill(); 
    graphicsContext.closePath(); 
}); 

我似乎无法得到任何东西显示在实际的画布本身虽然，它只是空的。我怀疑dataContainer.selectAll("customCircle.circle")行，因为我的代码永远不会进入每个循环（因此永远不会绘制）。我不明白为什么它不会;所有的自定义元素存在，当我通过console.log检查它。

这里的附带的jsfiddle：http://jsfiddle.net/37871qu4/

Answer 1

两件事情：

dataContainer.selectAll("customCircle.circle"); 

会选择那些customCircle一类.circle的customCircle 的所有儿童。

我想你的意思是：

dataContainer.selectAll(".circle"); 

这是所有customCircle的有一类.circle的孩子。

接下来，

node.attr("size") 

你从来没有 “大小” 分配给您的节点。

最后，

.attr("x", (Math.random() * 800)) 

给出的所有节点的相同x值。试试：

.attr("x", function(d,i){ return Math.random() * 800; }) 

固定了fiddle。