双击一个节点,淡出除了它的近邻之外的所有节点。双击再次将它们带回来

时间:2017-03-08 09:55:21

标签: d3.js

我正在使用以下代码进行iamges和mouseover文本。现在我已经添加了双击节点的代码以淡出所有但是它不起作用并且链接颜色也没有改变。任何人都可以帮忙吗

       var width = 960,
       height = 500

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

     var force = d3.layout.force()
    .gravity(0.1)
    .charge(-120)
    .linkDistance(30)
    .size([width, height]);

      var voronoi = d3.geom.voronoi()
     .x(function(d) { return d.x; })
     .y(function(d) { return d.y; })
     .clipExtent([[0, 0], [width, height]]);

     d3.json("miserables1.json", function(error, json) {
     if (error) throw error;

     force
      .nodes(json.nodes)
      .links(json.links)
      .start();

     var link = svg.selectAll(".link")
     .data(json.links)
     .enter().append("line")
     .attr("class", "link", "fill:red; stroke:red;");

     var node = svg.selectAll(".node")
    .data(json.nodes)
     .enter().append("g")
    .attr("class", "node")
    .call(force.drag);
    node.append("svg:image")
   .attr("xlink:href", function(d) { return d.imagen })
   .on('dblclick', connectedNodes);
    var circle = node.append("circle")
   .attr("r", 4.5);

   var label = node.append("text")
  .attr("dy", ".35em")
  .text(function(d) { return d.name; });

   var cell = node.append("path")
  .attr("class", "cell");

   force.on("tick", function() {
   cell
    .data(voronoi(json.nodes))
    .attr("d", function(d) { return d.length ? "M" + d.join("L") : null;    });

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

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

    label
    .attr("x", function(d) { return d.x + 8; })
    .attr("y", function(d) { return d.y; });
   });
   });


     var toggle = 0;

     var linkedByIndex = {};
     for (i = 0; i < graph.nodes.length; i++) {
     linkedByIndex[i + "," + i] = 1;
     };
     graph.links.forEach(function (d) {
     linkedByIndex[d.source.index + "," + d.target.index] = 1;
     });

    function neighboring(a, b) {
    return linkedByIndex[a.index + "," + b.index];
    }
    function connectedNodes() {
    if (toggle == 0) {
    //Reduce the opacity of all but the neighbouring nodes
    d = d3.select(this).node().__data__;
    node.style("opacity", function (o) {
        return neighboring(d, o) | neighboring(o, d) ? 1 : 0.1;
    });
    link.style("opacity", function (o) {
        return d.index==o.source.index | d.index==o.target.index ? 1 : 0.1;
    });

    toggle = 1;
    } else {

    node.style("opacity", 1);
    link.style("opacity", 1);
    toggle = 0;
     }
    }

0 个答案:

没有答案