Question

这是我创建的气泡图的代码。我使用强制布局来创建图表。

var margin = {
top: 10,
right: 10,
bottom: 10,
left: 10
},

width = 1000 - margin.left - margin.right,

height = 600 - margin.top - margin.bottom;  

d3.select('#' + divId).append('div').attr('id', 'chart').attr('class', 'chart');

var n = data.vistaJson.length;
m = 1,
padding = 5,
radius = d3.scale.sqrt().range([10, 50]),                                  
color = d3.scale.category10().domain(d3.range(m)),                        
x = d3.scale.ordinal().domain(d3.range(m)).rangePoints([0, width], 1);

var xscale = d3.scale.linear()
.domain([0, 500])
.range([20, 500]);

var nodes = [];
for(var i=0; i< n; i++){ 
    var coordinates = data.vistaJson[i].SLAB.split('_');
        v = data.vistaJson[i].COUNT
        nodes.push({
            radius: radius(v),
            color: color(i),
            count: v,
            cx: xscale(x(i)),
            cy: xscale(height / 2),
            xAxis: coordinates[0],
            yAxis: coordinates[1]
        });
}


var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");


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



 var circle = svg.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("r", function (d) {
return d.radius;
})
.style("fill", function (d) {
return d.color;
})
.call(force.drag);

  var labels = svg.selectAll("text")                                      
        .data(nodes)
        .enter()
        .append("text")
        .attr({"x":function(d){return d.x;},
               "y":function(d){return d.y;}})
        .text(function(d){return d.count;})
        .call(force.drag);  

circle.each(gravity(.2 * e.alpha))
    .each(collide(.5))
    .attr("cx", function (d) {
    return d.x;
})
    .attr("cy", function (d) {
    return d.y;
});

labels.attr("x", function(d) { return d.x; })        
      .attr("y", function(d) { return d.y; }); 
 }

// Move nodes toward cluster focus.
function gravity(alpha) {
return function (d) {
    d.y += (d.cy - d.y) * alpha;
    d.x += (d.cx - d.x) * alpha;
};
}

// Resolve collisions between nodes.
function collide(alpha) {
var quadtree = d3.geom.quadtree(nodes);
return function (d) {
    var r = d.radius + radius.domain()[1] + padding,
        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.color !== quad.point.color) * padding;
            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;
    });
};
}

我想在节点上悬停鼠标时显示的节点添加标题。

之前我使用过包布局，我给出了这样的标题：

    var node = vis.selectAll("g.node")
    .data(bubble.nodes(classes(json), function(d) { return d.name; })
    .filter(function(d) { return !d.children; }))
    .enter()
   .append("svg:g")
    .attr("class", "node")
    .attr("transform", function(d) { return "translate(" + xscale(d.x) + "," + xscale(d.y) + ")"; });

node.append("svg:title")
    .text(function(d) { return d.xAxis + ": " + d.yAxis; });

使用forceLayout时如何显示标题。请帮忙。

Answer 1

我认为它应该在力布局中看起来像这样：

 var node = svg.selectAll(".node")
    .data(graph.nodes)
    .enter().append("circle")
    .attr("class", function(d) { return d.nodes ? "nonleaf" : "leaf"; })
    .attr("r", 5)
    .call(force.drag);


node.append("title")
    .text(function(d) { return d.count; });

我希望这会有所帮助。对我而言，它就像那样......

如何使用强制布局向d3js气泡图添加标题

1 个答案: