Geek asks and answers

Is d3 tagging possible?

Is it possible to have face labels in a graph using d3 ? I looked through examples and some documentation, and I see where node marking is possible, but border marking is not mentioned anywhere else (which I can find).

+5
source share
3 answers

Following the example of other nations, I

  • add pathnext to each edge,
  • add textto the edges
  • attach this text to textpaththat refers to a path along the edge

The following ideas are used in this example: http://bl.ocks.org/jhb/5955887

+8
source

"", . . - node node, , . (, ) .

+3

, , . , git. Eclipse ( Eclipse). , , . , id lines, xlink:href. , tspan textpath, , , .

        function drawLines(links) {
        var diagonal = d3.svg.diagonal();
        var format = d3.format(".1%");
        var linkKey = function(l) {return l.target.key; };
        var lines = linesGroup.selectAll("path").data(links, linkKey);
        lines.enter()
            .append("path")
            .on("mouseover", select)
            .on("mouseout", unselect)
            .attr("d", diagonal)
            .attr("id", function (l) { return "interaction-path-target-" + l.target.key; })
            .style("stroke-width", 0.000001);
        lines.exit()
            .transition().duration(500)
            .style("stroke-width", 0.000001)
            .remove();

        lines.transition()
            .delay( function(d, i) { return i * 100; })
            .duration(500)
            .style("stroke-width", function(d) { return d.weight == 0 ? 0.000001 : d.weight / 1000; })
            .attr("d", diagonal);

        var percentages = linesGroup.selectAll("text").data(links, linkKey);
        percentages.enter()
            .append("text")
            .attr("opacity", 1)
            .append("svg:textPath")
            .attr("startOffset", "70%")
            .attr("xlink:href", 
                    function(l) { 
                        return "#interaction-path-target-" + l.target.key; 
                    })
            .append("svg:tspan")
            .attr("dy", 3)
            .attr("class", "percentageText")
        percentages.exit()
            .transition().duration(500)
            .attr("opacity", 0)
            .remove();
        percentages
            .transition()
            .delay( function(d, i) { return i * 100; })
            .duration(500)
            .attr("opacity", 1);

        percentages.select(".percentageText").text(function(d) {
                var newvalue = d.weight ?
                    d.incomming ? percentageIn(d.weight) : percentageOut(d.weight) : 0;
                return format(newvalue);
            });
    }
+1

More articles:


All Articles