Блог

Главная - Вопросы по программированию - Метки не отображаются при принудительной визуализации

Метки не отображаются при принудительной визуализации

#javascript #css #d3.js #force-layout

#javascript #css #d3.js #принудительная компоновка

Вопрос:

Я создаю принудительный макет в d3. Код прикрепляет метки к svg, и я могу видеть их на вкладке элементы в инспекторе.

Но они не отображаются на экране.

Метки присутствуют, но по какой-то причине они не отображаются. Когда вы переходите на вкладку элементы в инспекторе, вы можете их увидеть. Я думаю, может быть, это проблема с css или должно быть прикреплено значение для размещения меток. Подсказки работают, но мне нужно, чтобы фактические метки были там постоянно.

 ***********************JS*********************

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

var color = d3.scaleOrdinal(d3.schemeCategory20);

// Add "forces" to the simulation here
var simulation = d3.forceSimulation()
    .force("center", d3.forceCenter(width / 2, height / 2))
    .force("charge", d3.forceManyBody().strength(-30))
    .force("collide", d3.forceCollide(10).strength(0.9))
    .force("link", d3.forceLink().id(function(d) { return d.id; }));


d3.json("data/force.json", function(error, graph) {
    if (error) throw error;
    // Add lines for every link in the dataset
    // Basic tooltips

    var tip = d3.tip().attr('class', 'd3-tip')
        .html(function(d) {
          return d.id;
        });
        svg.call(tip)

    var link = svg.append("g")
        .attr("class", "links")
        .selectAll("line")
        .data(graph.links)
        .enter().append("line")
            .attr("stroke-width", function(d) { return 
Math.sqrt(d.value); });

    // Add circles for every node in the dataset
    var node = svg.append("g")
        .attr("class", "nodes")
        .selectAll("circle")
        .data(graph.nodes)
        .enter().append("circle")
        .on("mouseover", tip.show)
        .on("mouseout", tip.hide)
            .attr("r", 5)
            .attr("fill", function(d) { return color(d.group); })
            .call(d3.drag()
                .on("start", dragstarted)
                .on("drag", dragged)
                .on("end", dragended)
            );

    node.append("label")
            .text(function(d) { return d.id });

    // Attach nodes to the simulation, add listener on the "tick" 
event
    simulation
        .nodes(graph.nodes)
        .on("tick", ticked);

    // Associate the lines with the "link" force
    simulation.force("link")
        .links(graph.links)

    // Dynamically update the position of the nodes/links as time 
passes
    function ticked() {
        link
            .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; });

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

// Change the value of alpha, so things move around when we drag a 
node
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.7).restart();
    d.fx = d.x;
    d.fy = d.y;
}

// Fix the position of the node that we are looking at
function dragged(d) {
    d.fx = d3.event.x;
    d.fy = d3.event.y;
}

// Let the node do what it wants again once we've looked at it
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
    d.fx = null;
    d.fy = null;
}

***********************CSS*********************
svg {
 margin-left: auto;
 margin-right: auto;
 display: block;
 border: black solid 2px;
}

.links line {
 stroke: #999;
 stroke-opacity: 0.6;
}

.nodes circle {
 stroke: #fff;
 stroke-width: 1.5px;
}


text {
 font-family: sans-serif;
 font-size: 10px;
 color: black;
}

.node label {
 font-family: sans-serif;
 font-size: 10px;
 color: black;
}

.node text {
 font: 10px sans-serif;
 color: black;
}

***********************HTML*********************
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="//rawgithub.com/Caged/d3- 
tip/master/examples/example-styles.css">
</head>
<body>

<nav class="navbar navbar-default"></nav>
<svg width="1400" height="900"></svg>

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="js/main.js"></script>
<script src="js/tool-tip.js"></script>

Комментарии:

1. Я полагаю, вам нужны элементы svg text , но вам придется добавлять text элементы к g , а не к каждому кругу (как node.append() добавляется элемент к каждому кругу).