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数组。但随后在客户端绘制图形。

D3：从SVG检索数据

1 个答案: