javascript - How to select an element in svg in D3 - Stack Overflow|江阴雨辰互联

I have an application in D3 which forms a network like structure,it has a few nodes thats are connected to each other.Now i want to select a portion of that network and also want the values of that selected portion.here i am posting my screen shot

Now i want to select Foxconn and Amazon nodes and also want their values..

here is my code in D3..

<!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=".v3.min.js"></script>
<link rel="stylesheet" href="app.css">
<script>
    // .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 : "Kodak",
        target : "Qualm",
        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);

    var gStates = svg.selectAll("g.state").data(links);

    var drag = d3.behavior.drag().on("drag", function(d, i) {
        var selection = d3.selectAll('.selected');

        if (selection[0].indexOf(this) == -1) {
            selection.classed("selected", false);
            selection = d3.select(this);
            selection.classed("selected", true);
        }

        selection.attr("transform", function(d, i) {
            d.x += d3.event.dx;
            d.y += d3.event.dy;
            return "translate(" + [ d.x, d.y ] + ")"
        })
        // reappend dragged element as last
        // so that its stays on top
        this.parentNode.appendChild(this);
        d3.event.sourceEvent.stopPropagation();
    });


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

    // 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>

Now i want to select Foxconn and Amazon nodes and also want their values..

here is my code in D3..

<!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/d3.v3.min.js"></script>
<link rel="stylesheet" href="app.css">
<script>
    // http://blog.thomsonreuters./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 : "Kodak",
        target : "Qualm",
        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);

    var gStates = svg.selectAll("g.state").data(links);

    var drag = d3.behavior.drag().on("drag", function(d, i) {
        var selection = d3.selectAll('.selected');

        if (selection[0].indexOf(this) == -1) {
            selection.classed("selected", false);
            selection = d3.select(this);
            selection.classed("selected", true);
        }

        selection.attr("transform", function(d, i) {
            d.x += d3.event.dx;
            d.y += d3.event.dy;
            return "translate(" + [ d.x, d.y ] + ")"
        })
        // reappend dragged element as last
        // so that its stays on top
        this.parentNode.appendChild(this);
        d3.event.sourceEvent.stopPropagation();
    });


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

    // 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>

Share Improve this question edited Nov 26, 2013 at 10:51 asked Nov 24, 2013 at 1:55 lucifer 2,33720 gold badges61 silver badges106 bronze badges

@Lars Kotthoff thanks for your i am able to get all elements in the console but now i need that i will select more than one node and those nodes will go to console.can you help plese ??this is the only issue i have stucked with..please please help... – lucifer Commented Nov 25, 2013 at 6:42

Add a ment |

2 Answers 2

Sorted by: Reset to default 4

You can filter a selection with .filter(). In your case, this would look something like this.

var selected = circle.filter(function(d) {
         return d.name == "Amazon" || d.name == "Foxconn";
});

Now you can operate on that selection, where this will be the circle elements and the data is accessible in the usual way.

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

when you use enter() to append node, i think you should add some attribute to label the

node such as a id

<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>Template Index</title>
</head>
<body>

  <ul id="p">
  </ul>

    <script src="http://d3js/d3.v3.min.js"></script>
  <script>
  var pany = [
    { id: "IBM", value: "222"},
    { id: "MS", value: "222"},
    { id: "Google", value: "222"}
  ];
  var p = d3.select("#p").selectAll(".")
    .data(pany)
    .enter()
    .append("li")
    .attr("id", function (d) { return "id" + d.id; })
    .text(function (d) { return d.id; });

  var ibm = d3.select("#idIBM").datum();
  console.log(ibm); // Object { id="IBM", value="222"}
  </script>
</body>
</html>

then you can get the selection throw d3

then get the object data binded in selection by datum()

update: i update the file and tested in firefox chrome and ie10 it works well

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745389985a4625617.html

javascript - How to select an element in svg in D3 - Stack Overflow

2 Answers 2

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - How to select an element in svg in D3 - Stack Overflow

2 Answers 2

相关推荐