如何在D3上进行点击事件

Question

我正在使用D3进行链接分析。 为此，我需要添加一个click事件，以便显示节点的值。

这是我的代码...

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.link {
fill: none;
stroke: #666;
stroke-width: 1.5px;
}

#licensing {
fill: green;
}

.link.licensing {
stroke: green;
}

 .link.resolved {
stroke-dasharray: 0, 2 1;
   }

circle {
fill: #ccc;
stroke: #333;
stroke-width: 1.5px;
}

text {
font: 10px sans-serif;
pointer-events: none;
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
    // http://blog.thomsonreuters.com/index.php/mobile-patent-suits-graphic-of-the-day/

    /*Here licensing type is making the green arrow
     *Here resolved type is making the solid arrow
     *Here suit type is making the dotted arrow
     *
     *
     **/

    var links = [ {
        source : "Microsoft",
        target : "Amazon",
        type : "licensing"
    }, {
        source : "Microsoft",
        target : "HTC",
        type : "licensing"
    }, {
        source : "Samsung",
        target : "Apple",
        type : "suit"
    }, {
        source : "Motorola",
        target : "Apple",
        type : "suit"
    }, {
        source : "Nokia",
        target : "Apple",
        type : "resolved"
    }, {
        source : "HTC",
        target : "Apple",
        type : "suit"
    }, {
        source : "Kodak",
        target : "Apple",
        type : "suit"
    }, {
        source : "Microsoft",
        target : "Barnes & Noble",
        type : "suit"
    }, {
        source : "Microsoft",
        target : "Foxconn",
        type : "suit"
    }, {
        source : "Apple",
        target : "HTC",
        type : "suit"
    }, {
        source : "Microsoft",
        target : "Inventec",
        type : "suit"
    }, {
        source : "Samsung",
        target : "Kodak",
        type : "resolved"
    }, {
        source : "LG",
        target : "Kodak",
        type : "resolved"
    }, {
        source : "RIM",
        target : "Kodak",
        type : "suit"
    }, {
        source : "Sony",
        target : "LG",
        type : "suit"
    }, {
        source : "Kodak",
        target : "LG",
        type : "resolved"
    }, {
        source : "Apple",
        target : "Nokia",
        type : "resolved"
    }, {
        source : "Qualcomm",
        target : "Nokia",
        type : "resolved"
    }, {
        source : "Kodak",
        target : "Samsung",
        type : "resolved"
    }, {
        source : "Apple",
        target : "Samsung",
        type : "suit"
    }, {
        source : "Kodak",
        target : "RIM",
        type : "licensing"
    }, {
        source : "Kodak",
        target : "Qualcomm",
        type : "licensing"
    } ];

    var nodes = {};

    // Compute the distinct nodes from the links.
    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 width = 960, height = 500;

    var force = d3.layout.force().nodes(d3.values(nodes)).links(links)
            .size([ width, height ]).linkDistance(60).charge(-300).on(
                    "tick", tick).start();

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

    // Per-type markers, as they don't inherit styles.
    svg.append("defs").selectAll("marker").data(
            [ "suit", "licensing", "resolved" ]).enter().append("marker")
            .attr("id", function(d) {
                return d;
            }).attr("viewBox", "0 -5 10 10").attr("refX", 15).attr("refY",
                    -1.5).attr("markerWidth", 6).attr("markerHeight", 6)
            .attr("orient", "auto").append("path").attr("d",
                    "M0,-5L10,0L0,5");

    var path = svg.append("g").selectAll("path").data(force.links())
            .enter().append("path").attr("class", function(d) {
                return "link " + d.type;
            }).attr("marker-end", function(d) {
                return "url(#" + d.type + ")";
            });

    var circle = svg.append("g").selectAll("circle").data(force.nodes())
            .enter().append("circle").attr("r", 6).call(force.drag);

    var text = svg.append("g").selectAll("text").data(force.nodes())
            .enter().append("text").attr("x", 8).attr("y", ".31em").text(
                    function(d) {
                        return d.name;
                    });

    //selection is happening 
    var selected = circle.filter(function(d) {
        return d.name;
    });

    selected.each(function(d) {
        // d contains the data for the node and this is the circle element

        console.log(d.name);
    });

    var circle = svg.append("g").selectAll("circle").data(force.nodes())
            .enter().append("circle").attr("r", 6).on("click", clickfn)
            .call(force.drag);

    var clickfn = function(node) {
        alert(node);
    }

    // Use elliptical arc path segments to doubly-encode directionality.
    function tick() {
        path.attr("d", linkArc);
        circle.attr("transform", transform);
        text.attr("transform", transform);
    }

    function linkArc(d) {
        var dx = d.target.x - d.source.x, dy = d.target.y - d.source.y, dr = Math
                .sqrt(dx * dx + dy * dy);
        return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr
                + " 0 0,1 " + d.target.x + "," + d.target.y;
    }

    function transform(d) {
        return "translate(" + d.x + "," + d.y + ")";
    }
</script>

我要在这段代码中做的是绘制一些节点并在它们之间建立链接。 显然，链接是定向的。 现在，我想在每个节点上添加click事件，但我无法做到这一点。任何人都可以在节点上单击事件方面为我提供帮助吗...

Answer 1

您是否尝试过简单明了的方法：

var circle = svg.append("g").selectAll("circle")
    .data(force.nodes())
    .enter()
    .append("circle")
    .attr("r", 6)
    .on("click", clickfn)
    .call(force.drag);

var clickfn = function(node) {
    // do something
}

如何在D3上进行点击事件

问题描述

1 个解决方案

解决方案1
1 2013-11-27 12:58:08

如何在D3上进行点击事件

问题描述

1 个解决方案

解决方案1 1 2013-11-27 12:58:08

解决方案1
1 2013-11-27 12:58:08