将d3.js SVG移植到HTML5 Canvas？

Question

两天前我在这里提出了一个问题（链接），想用d3快速绘制大量元素（50k）。但是我发现d3对我的需求来说太慢了，需要完全不同的东西或其他方法。

使用Canvas绘制数据速度快约15倍，我看到过这个。所以，似乎可以将d3移植到Canvas上。但是我不知道如何重写我的代码以使用Canvas。

 dataset = data;
var stack = d3.layout.stack();
stack(dataset);

var x= d3.scale.ordinal()
        .domain(d3.range(dataset[0].length))
        .rangeRoundBands([0, w]);

var y= d3.scale.linear()
        .domain([0, 1])
        .range([0, h]);

var svg = d3.select("body")
        .append("svg")
        .attr("width", w)
        .attr("height", h);

var groups = svg.selectAll("g")
                .data(dataset)
                .enter()
                .append("g");

var rects = groups.selectAll("rect")
                .data(function (d) {
                    return d;
                })
                .enter()
                .append("rect")
                .attr("x", function (d, i) {
                    return x(i);
                })
                .attr("y", function (d) {
                    return y(d.y0 + d.y);
                })
                .attr("height", function (d) {
                    return h - y(d.y0);
                })
                .attr("width", x.rangeBand())
                .attr("fill", function (d, i) {
                    return color(i);
                });

如何将此更改为Canvas使用？有没有描述如何做到这一点的教程？或者其他库是否更适合此用途？

- EsoMoa

---

有一些画布绘图库可以根据 JSON 数据绘制条形图，但是一个基本的画布条形图非常简单的代码。这里有一个包含不到20行代码的函数实现了一个条形图：https://jsfiddle.net/mgpLghcy/ - markE

Elijah Meeks的书《D3.js实战》是这个主题的一个相当不错的资源。Canvas材料在后面的章节中。 - Mars

Answer 1

这是一个很好的示例，使用Canvas绘制和D3，在Open Layers地图上显示叠加层。对于大量对象，Canvas相比SVG表现更佳。已测试500,000行。

https://openlayers.org/en/latest/examples/d3.html

- Maksym Kozlenko