Question

我希望使用Mike在此描述的群集力布局：https://bl.ocks.org/mbostock/7882658

该示例对我来说很好，但是，问题是当我将数据源更改为使用不同群集名称的JSON文件时，事情就会停止工作。没有错误，但没有显示。

目标是将每个部门中的名称分组到一个集群中。

JSON文件位于html中...不确定是否可以上传jsfiddle的数据

这里的任何方向都非常赞赏。

这是我尝试重新创建节点的地方。节点出现在console.log中，但从未进入屏幕。

var nodes = d3.json("/r.json", function(error, data) {

for (var i = 0; i < data.length; i++) {
    var obj = data[i];
    for (var key in obj){
        var rating = obj['rating']; // rating
        var r = rating * 20;        // radius
        var n = obj['name'];        // name
        var div = obj['division'];  // division
        // d = {cluster: div, radius: r, name: n, division: div, rating: rating};
        d = {cluster: div, radius: r};
        // console.log(key+"="+obj[key]);
    } 
    if (!clusters[i] || (r > clusters[i].radius)) clusters[i] = d;
    // console.log(d);
}
return d;
});

由于凯文

Answer 1

首先，如果您想使用额外的数据文件，可以使用plunkr添加json文件其次，我使用json文件将你的代码从小提琴复制到plunkr，console.log(nodes)没有打印出数据，这是因为代码在这里检索数据：

var nodes = d3.json("/r.json", function(error, data) {...})

与示例中的不完全相同，因为这是异步请求，因此这行代码不起作用：

var force = d3.layout.force()
.nodes(nodes) // data for nodes is not retrieved yet

第三，在我将d3代码放入请求回调后，svg中有圆圈但不可见，我认为这是因为svg大小设置（宽度，高度）不太适合cx ，cy个圆圈，所以我将svg更改为更小的尺寸，并且它是可见的。这取决于您最终想要达到的目标，但调整圆圈的位置参数可能会有所帮助。

工作plunkr here。希望这可以提供帮助。

如何将JSON文件与Cluster Force一起使用

1 个答案: