OpenLayers3交互式地图上的D3.js SVG

我想知道将D3.js与OpenLayers 3集成以创建一个漂亮的交互式地图有多难

我正在看Mike的例子，D3+传单：

在d3.geo.path+Canvas，您将失去SVG的所有交互性和css样式支持

在上，有一个交互式地图，它将Mike的示例

d3.geo.path

+画布与OpenLayers集成在一起，以创建一个交互式地图：

---

所以我想知道，OpenLayers3中缺少了什么来允许创建类似于D3+传单示例的东西，或者考虑OL3设计是否可能？

你不能在openlayers上使用传单使用的css方法，D3+openlayer基本上使用画布上的D3绘制数据，而画布用作imagelayer

您需要使用openlayer approch:layers+样式，您可以使用openlayers“imagevector”层获得类似的性能

我用style+imagevector编辑了您的JSFIDLE：

---

使用openlayers.v4和d3.v4是可能的。看看这些要点和提琴

调用

init\u ol\u d3（map）

，它会返回一个函数，用于在longlat和screen之间进行缩放，然后您可以像往常一样使用d3和css：

drawRoute = d3.line()
    .x(function(lonlat) { return s(lonlat)[0] })
    .y(function(lonlat) { return s(lonlat)[1] })

将鼠标悬停在该行上，它会按照css中的设置更改颜色。 对不起，解释得不好，我的工作日已经结束了。有关更多信息，请参见要点。

---

旋转（alt+shift+mouse）不起作用（我还不需要）。也许会有人来修理…

有多难？在不可能的地方。D3+传单与美国县开放层与美国县和选择：正是我所寻找的，谢谢！但我想知道，为什么会有人使用矢量层呢？矢量层更灵敏，缩放时没有像素。它可以处理少量数据

drawRoute = d3.line()
    .x(function(lonlat) { return s(lonlat)[0] })
    .y(function(lonlat) { return s(lonlat)[1] })