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

将使用.circle类选择customCircle 的所有子项，即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。

d3 JS动态画布

1 个答案: