Question

我的公司目前有一个SVG图形库，一个内部工程师已经开发（遵循Wilkinson的图形语法中规定的规范），他们热衷于在基于浏览器的数据探索工具中重用。唯一的问题是这个库提供静态SVG图像而不支持交互。

我希望用Apache Batik替换一些自制代码，并使用javascript库扩充图形以通过d3提供交互性。

例如，散点图将在服务器端生成已知的css类，并包含在用户将访问的html页面中，而html页面又将使用d3.js和我们的javascript库。在加载时，我们将选择图形并添加适当的鼠标悬停/单击/缩放/等。处理程序。

这似乎在理论上有效，但我想知道我们是否会忽视某些事情。这是一种有效/可靠的做事方式，还是我们应该专注于一个库来创建交互式图形而不是两个？

我认为可能成为问题的领域是流数据。在我看来，我们可以从静态图开始，但是一旦你开始动态创建点/线/等，你真的需要知道图形遵守的规则（例如，哪些变量实际映射到图形线，它的颜色等等，这使得服务器和客户端都需要冗余定义。

那么......你觉得怎么样？

Answer 1

D3中没有任何内容假定或要求您从空页/ SVG开始。从现有元素开始并修改它们是完全有效的。从本质上讲，唯一的区别是您在大多数创建元素的示例中省略了初始步骤。

唯一需要担心的是正确的数据绑定到正确的元素，这取决于数据到DOM元素的分配的复杂程度，可能会或可能不会有问题。原则上，您的代码会喜欢这个。

var selection = d3.select("#existingSVG").selectAll("text").data(dataForText);

这为您提供标准的D3选择，包括输入，更新和退出部件，可以像平常一样操作。如果数据绑定很复杂，则可能需要为.data()指定一个键功能。流程数据的过程相同。