Question

我在下面有以下代码：

    var node = svg.selectAll(".node")
          .data(graph.nodes)
          .enter()
          .append("circle")
          .attr("class", "node")
          .attr("r", 20)
          .style("fill", function(d) { return color(d.group); })
          .call(force.drag)
          .style("visibility", function(d) {
            return d.group == 1 ? "hidden" : "visible";
          })
          .on("mouseover", function(d) {
            if(d.group == 2) {
              node.filter(function(d) { return d.group == 1; }).style("visibility", "visible");
              link.filter(function(d) { return d.value == 2; }).style("visibility", "visible");
            }
          }).on("mouseout", function(d) {
            if(d.group == 2) {
              node.filter(function(d) { return d.group == 1; }).style("visibility", "hidden");
              link.filter(function(d) { return d.value == 2; }).style("visibility", "hidden");
          }
        });

var texts = svg.selectAll("text.label")
                .data(graph.nodes)
                .enter().append("text")
                .attr("class", "label")
                .attr("fill", "black")
                .text(function(d) {  return d.name;  });

我想将两个变量node和texts结合起来，将鼠标悬停效果移动到组合中。这可能吗？如果是这样，怎么样？谢谢！

Answer 1

我相信你可以与filter联系起来。即，

var node = svg.selectAll(".node").filter("text.label")

Answer 2

.on("mouseover", function(d) {
            if(d.group == 2) {
               changeVisibility("visible")
            }
          }).on("mouseout", function(d) {
            if(d.group == 2) {
              changeVisibility("hidden")
          }


function changeVisisbility(visibility){
      node.filter(function(d) { return d.group == 1; }).style("visibility", visibility);
      link.filter(function(d) { return d.value == 2; }).style("visibility", visibility);
}

有没有办法结合d3 json变量？

2 个答案: