D3-无法在节点旁边显示任何标签

时间:2019-11-04 19:12:39

标签: d3.js

我想念什么? 我无法显示静态标签。 但是,我能够获得在悬停上工作的工具提示。 我知道它们在那里,因为当我尝试selectAll(“ g”)时,标签显示在svg的左上方。 问题在于它们没有显示在节点圆旁边。

var svg = d3.select("#chart-area").append("svg")
    .attr("width", width)
    .attr("height", height);

// [ LOAD DATA ] 

  // DEFINE 'NODES' AND 'EDGES'
    var edges = svg.selectAll("line")
        .data(data.links)
        .enter()
        .append("line")
        .style("stroke", "#ccc")
        .style("stroke-width", 1);

    var node = svg.selectAll(".node")
        .data(data.nodes)
        .enter()
        .append("g")
        .append("circle")
        .attr("r", function(d) {
            if (d.maker === "Benjamin Franklin")
                return 16;
            else
                return 9;
        })
        .attr("fill", function(d, index) {
            if (d.maker === "Benjamin Franklin")
                return "#000";
            else if (d.maker === "John Winthrop")
                return "#000"
            else {
                return color(index);
            }
        })
        .attr("opacity", .8)
        .call(d3.drag()  //Define what to do on drag events
            .on("start", dragStarted)
            .on("drag", dragging)
            .on("end", dragEnded));


    // TOOLTIP TEXT
    node.append("title")
        .text(function(d) {
            return d.maker + " " + d.objectName;
        });

    // LABELS
    node.append("text")
        .attr("class", "node")
        .attr("dx", 3)
        .attr("dy", 0)
        .text(function(d) {
            return d.object;
        });

var force = d3.forceSimulation(data.nodes)
// charge, link center etc

   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; });

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

    });

0 个答案:

没有答案