使用 D3.js 的 GWT 包装器创建节点链接图

Question

我正在尝试使用 D3.js (github.com/gwtd3/gwt-d3) 的 GWT 布局来创建带有力模型的节点链接图。首先，比this example 或this one 更简单的东西就足够了。

但是我真的很难使用 GWT 包装器创建更简单的图形。我找不到如何使用力、节点和链接对象的等效项。

我从一个开始：

Force force = D3.layout().force();

但是，我不知道对象节点“节点”和“链接”应该是什么以及如何初始化它们。它们的构造函数是不可见的。

force.nodes(nodes).links(links);

非常感谢您的帮助。

Answer 1

作为一种解决方法，添加额外的 JSNI 便利方法来创建 Force.Node 和 Force.Link 实例。

/**
 * Convenience function to overcome API limitation. 
 */
static final native <T> Node<T> newNode(T userDatum)/*-{
    return {
        datum : userDatum
    };
}-*/;

/**
 * Convenience function to overcome API limitation. 
 */    
static final native <T> Link<T> newLinkIndex(int source, int target, T userDatum) /*-{
    return {
        source : source,
        target : target,
        datum: userDatum
    };
}-*/;

1. 创建一个包含所有节点实例的 GWT D3 'nodes' 数组，
2. 初始化一个 GWT D3 'links' 数组，该数组使用来自 'nodes' 的索引 (int) 指向相应的 Node 实例，
3. 通过调用申请：force.nodes(nodes).links(links)

您可以在 MobilePatentSuits.java! 中看到一个完整的工作示例！