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。