来自 csv 的 D3.js 气泡图

Question

感谢 Stack Overflow 用户，我有一个带有标签的 D3 强制布局，效果非常好。我生成的 jsfiddle 在这里https://jsfiddle.net/TimBrighton/wLuoqynb/

现在我需要转换输入，以便它可以接受 csv 文件，而不是本示例中的“生成”节点。我猜 CSV 将只有“标题”、“半径”值。我已经使用这种功能的修改版本尝试了几个小时，但它只是不起作用：

d3.csv("data.csv", function(error, data) {
  if (error) throw error;

  data.forEach(function(d) {
    d.date = format.parse(d.date);
    d.value = +d.value;        
  });

我当前的代码在这里：

var width = 960,
    height = 500,
    padding = 1.5, // separation between same-color nodes
    clusterPadding = 6, // separation between different-color nodes
    maxRadius = 40;
    minRadius = 20;

var n = 50, // total number of nodes
    m = 5; // number of distinct clusters

var color = d3.scale.category10()
    .domain(d3.range(m));

// The largest node for each cluster.
var clusters = new Array(m);

var nodeNumber=1;

var nodes = d3.range(n).map(function () {

    var i = Math.floor(Math.random() * m),
        r = Math.sqrt((i + 1) / m * -Math.log(Math.random())) * maxRadius,
        d = {           
            cluster: i,
            radius: r,
            name: nodeNumber,
            x: Math.cos(i / m * 2 * Math.PI) * 200 + width / 2 + Math.random(),
            y: Math.sin(i / m * 2 * Math.PI) * 200 + height / 2 + Math.random()
        };
    if (!clusters[i] || (r > clusters[i].radius)) clusters[i] = d;
    nodeNumber++;
    return d;

});

var force = d3.layout.force()
    .nodes(nodes)
    .size([width, height])
    .gravity(.02)
    .charge(0)
    .on("tick", tick)
    .start();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var node = svg.selectAll("circle")
    .data(nodes)
    .enter().append("g").call(force.drag);
//addcircle to the group
node.append("circle")
    .style("fill", function (d) {
    return color(d.cluster);
}).attr("r", function(d){return d.radius})
//add text to the group    
node.append("text")
    .text(function (d) {
    return d.name;
})
.attr("dx", -10)
    .attr("dy", ".35em")
    .text(function (d) {
    return d.name
})
    .style("stroke", "none");






function tick(e) {
    node.each(cluster(10 * e.alpha * e.alpha))
        .each(collide(.5))
    //.attr("transform", functon(d) {});
    .attr("transform", function (d) {
        var k = "translate(" + d.x + "," + d.y + ")";
        return k;
    })

}

// Move d to be adjacent to the cluster node.
function cluster(alpha) {
    return function (d) {
        var cluster = clusters[d.cluster];
        if (cluster === d) return;
        var x = d.x - cluster.x,
            y = d.y - cluster.y,
            l = Math.sqrt(x * x + y * y),
            r = d.radius + cluster.radius;
        if (l != r) {
            l = (l - r) / l * alpha;
            d.x -= x *= l;
            d.y -= y *= l;
            cluster.x += x;
            cluster.y += y;
        }
    };
}

// Resolves collisions between d and all other circles.
function collide(alpha) {
    var quadtree = d3.geom.quadtree(nodes);
    return function (d) {
        var r = d.radius + maxRadius + Math.max(padding, clusterPadding),
            nx1 = d.x - r,
            nx2 = d.x + r,
            ny1 = d.y - r,
            ny2 = d.y + r;
        quadtree.visit(function (quad, x1, y1, x2, y2) {
            if (quad.point && (quad.point !== d)) {
                var x = d.x - quad.point.x,
                    y = d.y - quad.point.y,
                    l = Math.sqrt(x * x + y * y),
                    r = d.radius + quad.point.radius + (d.cluster === quad.point.cluster ? padding : clusterPadding);
                if (l < r) {
                    l = (l - r) / l * alpha;
                    d.x -= x *= l;
                    d.y -= y *= l;
                    quad.point.x += x;
                    quad.point.y += y;
                }
            }
            return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
        });
    };
}

Answer 1

为此 我制作了一个my.csv，内容如下

group,name,radius
1,A,30
1,B,40
1,C,50
1,D,60
1,E,70
1,F,40
2,G,50
2,H,60
2,I,70
3,J,90
3,K,30
3,L,50

我添加了一个 AJAX 操作，它在加载时加载 csv 异步，该函数将被称为 cmets added

d3.csv("my.csv", function(data) {
  //calculate the maximum group present
  m = d3.max(data, function(d){return d.group});
  //create the color categories
  color = d3.scale.category10()
  .domain(d3.range(m));
  //make the clusters array each cluster for each group
  clusters = new Array(m);
  dataset = data.map(function(d) {
    //find the radius intered in the csv
  var r = parseInt(d.radius);

    var dta = {
      cluster: d.group,//group
      name: d.name,//label
      radius: r,//radius
      x: Math.cos(d.group / m * 2 * Math.PI) * 100 + width / 2 + Math.random(),
      y: Math.sin(d.group / m * 2 * Math.PI) * 100 + height / 2 + Math.random()
    };
    //add the one off the node inside the cluster
    if (!clusters[d.group] || (d.radius > clusters[d.group].radius)) clusters[d.group] = dta;
    return dta;
  });
  //after mapping use that t make the graph
  makeGraph(dataset);
});

休息和老小提琴一样。

工作代码here.