javascript - D3 : Retrieve data from SVG

Question

是否可以通过 d3 从 svg 检索数据？

我有以下情况: 在调整大小页面上，我需要更新通过 d3 在服务器上生成的 svg 的宽度。例如 x 轴。然而，客户端 d3 库不了解 svg。我注意到每个 DOM 对象都有一个 __ Chart__ 对象。有什么方法可以访问范围和域并相应地更新它们吗？

Answer 1

当您在服务器上创建 SVG 并将其传输到客户端时，仅传输实际的 SVG DOM，而不传输您使用的任何 javascript 对象或属性(例如 d3 __data__ 属性)在创建它的过程中。

因此，为了将数据附加到实际随文件传递的 SVG 元素，您需要创建包含数据的该元素的属性。然后您可以选择元素客户端并解析数据属性。

示例:

/*** Server Side ***/
/* if `bars` is a d3 selection of rectangles in a bar graph */
bars.attr("data-name", function(d){return d.name;})
    .attr("data-value", function(d) {return d.value;});

/*** Client Side ***/
var bars = d3.selectAll("rect.bar")
             .datum(function(){
                return {
                  name: this.getAttribute("data-name"),
                  value: this.getAttribute("data-value")
                }
             })
             .on("click", function(d,i){
                 /* do something with the data */
             });

如果相关数据只是您想要在工具提示或类似交互中使用的几个数字或名称，则该方法有效。它不适用于像图表函数这样的复杂对象。如果您需要在客户端重新绘制/调整图表大小，我真的没有看到尝试在服务器端绘制图表有任何性能优势。

您可以创建服务器脚本来将所有数据解析为随时可用的格式，甚至可以运行 d3 布局函数来创建随时可以绘制的 JSON 数组。但然后在客户端绘制图形。