Question

标题几乎全是：

我希望在用户决定从图例中选择一个之前显示每个圆圈。

在下面的代码段中（您可以运行它），您可以看到我设法在未显示圆圈时（首先）使选择部分仅。我不知道如何在没有代码混乱的情况下扭转这一点。

进一步的细节：我认为解决这个问题的方法是实施一个计数器来计算true发送的每个false var active = d.active ? false : true;，然后在计数等于时显示所有圈子

var truecount = 0;
var falsecount = 0; 

if (active) {truecount+=1} else {falsecount+=1}; 

if (truecount > 0 && truecount == falsecount) {d3.selectAll(".cercle")
                                                 .attr("display", "true)};

可是：

1 /它不起作用（我可以听到你嘲笑这段代码是多么原始）

2 /我觉得有一种更简单的方法来实现这一目标。

任何人？

var data = "123456789".split("").map(function(d) {
  return {
    value: d
  }
});



var color = d3.scaleOrdinal()
  .range(["#00baff", "#0014fe", "#00dbaf", "#f4bf02", "#ffa600", "#ff0000", "#ff00c4", "#ee693e", "#99958f"]);

var svg = d3.select("body")
  .append("svg")
  .attr("width", 600)
  .attr("height", 600)
  
var fullgraph = svg.selectAll("circles")
                   .data(data)
                   .enter()
                   .append("circle")
                   .attr("class", "cercle")
                   .attr("cx", function(d,i) {return 200 + i * 30})
                   .attr("cy", 100)
                   .attr("r", function(e,j) {return 5 + j * 2})
                   .attr("id", function(d,i) {return "cir" + i})
                   .attr("fill", function(d,i) {return color(i)})
                   .attr("display", "none")
                   


var legende = svg.selectAll("bar")
  .data(data)
  .enter()
  .append("g")
  .attr("x", 0)
  .attr("y", function(d, i) {
    return 12 + i * 20
  })

legende.append("text")
  .text(function(d, i) {
    return d.value
  })
  .attr("class", "legtext")
  .style("font-family", "helvetica")
  .style("fill-opacity", 0.8)
  .attr("x", 4)
  .attr("y", function(d, i) {
    return 12 + i * 20
  })
  .style("font-size", 10)
  .style("fill", function(d, i) {
    return color(i)
  })
  .style("text-decoration", "none")
  .style("opacity", 1);

legende.append("rect")
  .attr("class", "recta")
  .attr("x", 2)
  .attr("y", function(d, i) {
    return 1 + i * 20
  })
  .attr("width", 65)
  .attr("height", 15)
  .style("fill", function(d, i) {
    return color(i)
  });

legende.on("click", function(d, i) {
  var active = d.active ? false : true;
  
  d3.selectAll((".cercle") - ("#cir" + i))
    .attr("display", function() {if (active) {return "none"} else {return "none"} });
    
  d3.select("#cir" + i)
    .attr("display", function() {if (active) {return "true"} else {return "none"} });

 
  d3.select(this)
    .select("rect")
    .style("opacity", function() {
      if (active) return 1;
    })

  d3.select(this)
    .select("text")
    .style("fill", function(e, j) {
      if (active) {
        return "white";
      } else {
        return color(i)
      }
    })
    .raise()
    
  
  d.active = active
});

.legende {
  cursor: pointer;
}

.recta {
  opacity: 0.1;
  cursor: pointer;
}

<script src="https://d3js.org/d3.v4.min.js"></script>

Answer 1

D3表示数据驱动文档。因此，使用数据：将active绑定到圆圈并根据它设置显示：

d3.selectAll(".cercle").attr("display", function(d) {
    if (d.active) {
        return "true"
    } else {
        return "none"
    }
});

这是您更新的代码：

var data = "123456789".split("").map(function(d) {
  return {
    value: d
  }
});

var color = d3.scaleOrdinal()
  .range(["#00baff", "#0014fe", "#00dbaf", "#f4bf02", "#ffa600", "#ff0000", "#ff00c4", "#ee693e", "#99958f"]);

var svg = d3.select("body")
  .append("svg")
  .attr("width", 600)
  .attr("height", 600)

var fullgraph = svg.selectAll("circles")
  .data(data)
  .enter()
  .append("circle")
  .attr("class", "cercle")
  .attr("cx", function(d, i) {
    return 200 + i * 30
  })
  .attr("cy", 100)
  .attr("r", function(e, j) {
    return 5 + j * 2
  })
  .attr("id", function(d, i) {
    return "cir" + i
  })
  .attr("fill", function(d, i) {
    return color(i)
  });

var legende = svg.selectAll("bar")
  .data(data)
  .enter()
  .append("g")
  .attr("x", 0)
  .attr("y", function(d, i) {
    return 12 + i * 20
  })

legende.append("text")
  .text(function(d, i) {
    return d.value
  })
  .attr("class", "legtext")
  .style("font-family", "helvetica")
  .style("fill-opacity", 0.8)
  .attr("x", 4)
  .attr("y", function(d, i) {
    return 12 + i * 20
  })
  .style("font-size", 10)
  .style("fill", function(d, i) {
    return color(i)
  })
  .style("text-decoration", "none")
  .style("opacity", 1);

legende.append("rect")
  .attr("class", "recta")
  .attr("x", 2)
  .attr("y", function(d, i) {
    return 1 + i * 20
  })
  .attr("width", 65)
  .attr("height", 15)
  .style("fill", function(d, i) {
    return color(i)
  });

legende.on("click", function(d, i) {
  var active = d.active ? false : true;
  
  d3.select("#cir" + i).each(function(d){
  d.active = active
  });

  d3.selectAll(".cercle").attr("display", function(d) {
      if (d.active) {
        return "true"
      } else {
        return "none"
      }
    });

  d3.select(this)
    .select("rect")
    .style("opacity", function() {
      if (active) return 1;
    })

  d3.select(this)
    .select("text")
    .style("fill", function(e, j) {
      if (active) {
        return "white";
      } else {
        return color(i)
      }
    })
    .raise()


  d.active = active
});

.legende {
  cursor: pointer;
}

.recta {
  opacity: 0.1;
  cursor: pointer;
}

<script src="https://d3js.org/d3.v4.min.js"></script>

如何在d3中未选择时显示所有圆圈？

1 个答案: