Question

我正在尝试将文字添加到某些圈子节点，但我无法这样做。

这是主文件的代码。我正在尝试创建第二组节点，名为包含文本的名称节点，然后我尝试将名称节点附加到包含圆圈的原始节点。我不确定这是否是解决此问题的正确方法。当我运行下面的代码时，左上角会出现一堆黑圈。我不在乎所有节点是否都说同样的东西但我至少想要出现一些文字。我认为问题在于行

var namenodes = d3.range(200).map(function() { return {name: "hello"};}),

但我不确定。它编译没有错误，但它没有做我想要的。任何见解将不胜感激。

    var nodes = d3.range(200).map(function() {
        return {
            radius: Math.random() * 12 + 4
        };
    }),
        root = nodes[0],
        color = d3.scale.category10();

    //my code
    var namenodes = d3.range(200).map(function() { return {name: "hello"};}),
        nameroot = namenodes[0],
        color = "black";

    root.radius = 0;
    root.fixed = true;

    nameroot.radius = 0;
    nameroot.fixed = true;


    var force = d3.layout.force()
        .gravity(0.05)
        .charge(function(d, i) {
        return i ? 0 : -2000;
    })
        .nodes(nodes)
        .size([width, height]);

   // var force = d3.layout.force()
        //.gravity(0.05)
        //.charge(function(d, i) {
        //.nodes(namenodes)
        //.size([width, height]); 

    force.start();

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

    svg.selectAll("circle")
        .data(nodes.slice(1))
        .enter().append("circle")
        .attr("r", function(d) {
        return d.radius;
    })
        .style("fill", function(d, i) {
        return color(i % 50);
    });
    //my code
    //svg.selectAll("names")
        //.data(namenodes.slice(1))
        //.enter().append("names")
        //.style(color);


    force.on("tick", function(e) {
        var q = d3.geom.quadtree(nodes),
            i = 0,
            n = nodes.length;

        while (++i < n) q.visit(collide(nodes[i]));

        svg.selectAll("circle")
            .attr("cx", function(d) {
            return d.x;
        })
            .attr("cy", function(d) {
            return d.y;
        });

    });

    svg.on("mousemove", function() {
        var p1 = d3.mouse(this);
        root.px = p1[0];
        root.py = p1[1];
        //force.resume();
    });

    svg.on("click", function() {
        if (force.alpha()) {
            force.stop();
        } else {
            force.resume();
        }
    });

    svg.selectAll("circle").on("click", function() {
        d3.event.stopPropagation();
        this.remove();
    });

    function collide(node) {
        var r = node.radius + 16,
            nx1 = node.x - r,
            nx2 = node.x + r,
            ny1 = node.y - r,
            ny2 = node.y + r;
        return function(quad, x1, y1, x2, y2) {
            if (quad.point && (quad.point !== node)) {
                var x = node.x - quad.point.x,
                    y = node.y - quad.point.y,
                    l = Math.sqrt(x * x + y * y),
                    r = node.radius + quad.point.radius;
                if (l < r) {
                    l = (l - r) / l * .5;
                    node.x -= x *= l;
                    node.y -= y *= l;
                    quad.point.x += x;
                    quad.point.y += y;
                }
            }
            return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
        };
    }
</script>

将文字添加到圆形节点d3

0 个答案: