текст не отображается в forcelayout d3js, но присутствует в поле зрения

текст виден в источнике при просмотре из веб-инспектора, но не виден на реальном графике

<html>
<head>
<title>D3</title>
<script src="d3.min.js"> </script>
</head>
<body>

 <script type="text/javascript">

        //Width and height
        var w = 500;
        var h = 300;

        //Original data
        var dataset = {
            nodes: [
                { name: "Adam" },
                { name: "Bob" },
                { name: "Carrie" },
                { name: "Donovan" },
                { name: "Edward" },
                { name: "Felicity" },
                { name: "George" },
                { name: "Hannah" },
                { name: "Iris" },
                { name: "Jerry" }
            ],
            edges: [
                { source: 0, target: 1 },
                { source: 0, target: 2 },
                { source: 0, target: 3 },
                { source: 0, target: 4 },
                { source: 1, target: 5 },
                { source: 2, target: 5 },
                { source: 2, target: 5 },
                { source: 3, target: 4 },
                { source: 5, target: 8 },
                { source: 5, target: 9 },
                { source: 6, target: 7 },
                { source: 7, target: 8 },
                { source: 8, target: 9 }
            ]
        };

        //Initialize a default force layout, using the nodes and edges in dataset
        var force = d3.layout.force()
                             .nodes(dataset.nodes)
                             .links(dataset.edges)
                             .size([w, h])
                             .linkDistance([50])
                             .charge([-100])
                             .start();

        var colors = d3.scale.category10();

        //Create SVG element
        var svg = d3.select("body")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h);

        //Create edges as lines
        var edges = svg.selectAll("line")
            .data(dataset.edges)
            .enter()
            .append("line")
            .style("stroke", "#ccc")
            .style("stroke-width", 1);

        //Create nodes as circles
        var nodes = svg.selectAll("circle")
            .data(dataset.nodes)
            .enter()
            .append("circle")
            .attr("r", 10)
            .style("fill", function(d, i) {
                return colors(i);
            })
           .call(force.drag);

         //To display text
        nodes.append("text")
            .attr("x", 12)
            .attr("dy", ".35em")
            .text(function(d){  return d.name;

              });
        //Every time the simulation "ticks", this will be called
        force.on("tick", function() {

            edges.attr("x1", function(d) { return d.source.x; })
                 .attr("y1", function(d) { return d.source.y; })
                 .attr("x2", function(d) { return d.target.x; })
                 .attr("y2", function(d) { return d.target.y; });

           // nodes.attr("cx", function(d) { return d.x; })
            //     .attr("cy", function(d) { return d.y; });
             nodes.attr("transform", function(d){ 
                 return "translate(" + d.x + "," + d.y + ")"; 
            });

        });


</script>
</body>
</html>

здесь я следую этому примеру: http://bl.ocks.org/mbostock/2706022

а также последовал этому сообщению: D3.js, график, не может отображать текст/метку узлов

Вот jsfiddle для этого кода: http://jsfiddle.net/devprashant/7kWwL/


javascript d3.js label force-layout
person devprashant    schedule 24.06.2014    source источник

Ответы (1)


arrow_upward
10
arrow_downward

Проблема заключается в том, что ваш текущий код добавляет <text> к <circle>, что не отображается. Вместо этого вам нужно создать группу <g> для каждого узла, содержащего как <circle> , так и <text>. Попробуй это:

var nodes = svg.selectAll("g")
    .data(dataset.nodes).enter()
    .append("g");

nodes.append("circle")
    .attr("r", 10)
    .style("fill", function (d, i) { return colors(i); })
    .call(force.drag);

nodes.append("text")
    .attr("x", 12)
    .attr("dy", ".35em")
    .text(function (d) { return d.name; });

Обновлен JSFiddle здесь.

person mdml    schedule 24.06.2014
comment
почему здесь важна группировка: 1. text является допустимым тегом svg 2. ‹circle› и ‹text› находятся в одной группе в обоих кодах, хотя в первом jsfiddle ‹text› является братом ‹circle›, а во втором jsfiddle оба ‹ кружок› и ‹текст› являются братьями и сестрами ‹g›. - person devprashant; 24.06.2014
comment
@devprashant: точно, хотя во втором JSFiddle и <circle>, и <text> являются братьями и сестрами как дочерние элементы <g>. Группы необходимы, так как они могут иметь дочерние элементы (например, <text>), в отличие от <circle> или <rect>. См. полную спецификацию SVG здесь. - person mdml; 24.06.2014