使用JS D3.js版本3的标题未显示在链接或节点上

Question

当前这是代码，但是我似乎无法在网络链接上或节点上的网络标题上打印度量/权重。如果有人可以提供帮助，那将是很好的。如果您想查看网络图，请通过消息发送。我正在使用D3.js版本3。

下面是我的代码：

var width = 1000, height = 700;

var color = d3.scale.category10();

var svg = d3.select("#d3-example").select("svg")
if (svg.empty()) {
 svg = d3.select("#d3-example").append("svg")
       .attr("width", width)
       .attr("height", height);
}

d3.json("graph.json", function(error, graph) {
 links = graph.links

var nodes = {};
links.forEach(function(link) {
    link.source = nodes[link.source] ||
        (nodes[link.source] = {name: link.source});
    link.target = nodes[link.target] ||
        (nodes[link.target] = {name: link.target});
        });

var force = d3.layout.force()
    .size([width, height])
    .nodes(d3.values(nodes))
    .links(links)
    .gravity(0.1)
    .linkDistance(200)
    .on('tick', tick)
    .charge(-1000)
    .start();

var link = svg.selectAll('.link')
    .data(links)
    .enter().append('line')
    .attr('class', 'link');

link.append("text")
    .attr("class", "data text-tooltip1")
    .attr("font-family", "Arial, Helvetica, sans-serif")
    .attr("fill", "Black")
    .style("font", "normal 12px Arial")
    .attr("transform", function(d) {
        return "translate(" +
            ((d.source.y + d.target.y)/2) + "," + 
            ((d.source.x + d.target.x)/2) + ")";
    })   

    .attr("dy", ".35em")
    .attr("text-anchor", "middle")
    .text(function(d) {
        console.log(d.target.name);
         return d.target.name;
    });

var node = svg.selectAll('.node')
    .data(force.nodes())
    .enter().append('circle')
    .attr('class', 'node')
    .attr('r', width * 0.02)

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

function tick(e) {

    node.attr('cx', function(d) { return d.x; })
        .attr('cy', function(d) { return d.y; })
        .call(force.drag);

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

Answer 1

尝试在代码中进行以下修改。这应该可以解决您的问题：

var width = 1000, height = 700;

var color = d3.scale.category10();

var svg = d3.select("#d3-example").select("svg")
if (svg.empty()) {
 svg = d3.select("#d3-example").append("svg")
       .attr("width", width)
       .attr("height", height);
}

d3.json("graph.json", function(error, graph) {
 links = graph.links

var nodes = {};
links.forEach(function(link) {
    link.source = nodes[link.source] ||
        (nodes[link.source] = {name: link.source});
    link.target = nodes[link.target] ||
        (nodes[link.target] = {name: link.target});
        });

var force = d3.layout.force()
    .size([width, height])
    .nodes(d3.values(nodes))
    .links(links)
    .gravity(0.1)
    .linkDistance(200)
    .on('tick', tick)
    .charge(-1000)
    .start();

var link = svg.selectAll('.link')
    .data(links)
    .enter().append('line')
    .attr('class', 'link').attr('id', function(d){return d.id});

d3.selectAll(".link").each(function(d) {

        svg
            .append('svg:text').attr("class", "LinkLabelText")
            .style("font-size", 15)
            .style("fill", "teal")
            .attr("x", (this.getTotalLength() / 2))
            .attr("y", "-20")
            .append('textPath')
            .attr("xlink:href", "#" + d.id)
            .html(function() {
                return d.target.name;
            });
    });

    .attr("dy", ".35em")
    .attr("text-anchor", "middle")
    .text(function(d) {
        console.log(d.target.name);
         return d.target.name;
    });

var node = svg.selectAll('.node')
    .data(force.nodes())
    .enter().append('circle')
    .attr('class', 'node')
    .attr('r', width * 0.02)

node.append("svg:text")
    .text(function(d) { return d.name });

function tick(e) {

    node.attr('cx', function(d) { return d.x; })
        .attr('cy', function(d) { return d.y; })
        .call(force.drag);

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