d3 JS 动态 Canvas

Question

我正在尝试通过 d3.js 在 HTML5 canvas 上绘制图表。

我正在按照此处的示例进行操作： 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();
});

我似乎无法在实际 canvas 本身中显示任何内容，它只是空的。我怀疑 dataContainer.selectAll("customCircle.circle") 行，因为我的代码从未进入每个循环（因此从不绘制）。我不明白为什么不会这样；当我通过 console.log 检查时，所有自定义元素都存在。

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

Answer 1

两件事：

 dataContainer.selectAll("customCircle.circle");

将 select 属于 customCircle 的所有 customCircle 子代 class .circle。

我想你的意思是：

dataContainer.selectAll(".circle");

有一个 class .circle 的 customCircle 的所有子项。

接下来，

node.attr("size")

您永远不会将 "size" 分配给您的节点。

最后，

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

为所有节点赋予相同的 x 值。尝试：

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

已修复 fiddle。

d3 JS 动态 Canvas

d3 JS Dynamic Canvas

html

javascript

canvas

d3.js