D3 select 數據內容相同的所有節點

Question

我得到了一堆帶有附加屬性“類型”的節點。 一旦選擇了服務器節點，我想突出顯示類型服務器中的所有節點。 效果很好，因為它是硬編碼的。

但是，對於不同的“類型”，例如客戶端或軟件，我怎樣才能動態地實現它。 代碼應該識別節點的類型。 我測試了用“this”替換過濾器，但它也不起作用。

node
    .filter((d) => {
        return d.type == "server"
    })
    .on("mouseenter", function(d) {
        node.filter((d) => {
            return d.type == "server"
        }).style("fill", "lightblue")
    })
    .on("mouseleave", function(d) {
        node.filter((d) => {
            return d.type == "server"
        }).style("fill", "whitesmoke")
    } )

Answer 1

我搞定了。 需要 select d.name 或您要過濾的任何內容。 之后，您可以使用過濾器 function 並比較這些值。

<script>
  var selection

  let data = d3.range(10)
    .map(function(d){
      return {
        name: Math.random() > 0.5 ? "server" : "client",
        x: Math.random() * 480,
        y: Math.random() * 480
      };
    });

  var nodes = d3.select('svg')
    .selectAll('circle')
    .data(data)
    .enter()
    .append('circle')
    .attr('cx', d => d.x)
    .attr('cy', d => d.y)
    .attr('r', 20)
    .attr("fill", "black")
    .on("mouseenter", function(d){
        selection = d.name
        console.log("Enter " + d.name + " " + selection)
        nodes.filter ( (n) => {
            return n.name === d.name
        })
        .attr("fill", "blue")
    })
    .on("mouseleave", function(d){
        selection = d.name
        console.log("Exit " + d.name + " " + selection)
        nodes.filter( (n) => {
            return n.name === d.name
        })
        .attr("fill", "black")
    })
</script>