d3.js获取所选节点并为所有选定节点应用颜色

Question

我正在使用d3.js作为我的图表。要选择节点，用户将双击特定节点。我的程序会将不透明度更改为所选节点的0.1，以显示已选择节点。以相同的方式，用户可以选择许多节点，其中不透明度将相应地改变。新要求是为所有选定节点应用颜色（不透明度= 0.1）。为此，我需要获得所有不透明度= 0.1的节点。我这样工作。

 node.style("fill", function (o) {
                    debugger;
                    if (o.name == selectednode.name) {

                        o.colorname = color;
                        return color;

                    } else {

                        return o.colorname;
                    }
                });

这将仅更改上次选择的节点的颜色。我需要应用其不透明度为0.1的所有节点的颜色。

Answer 1

试试这种方式。

popen("bash -c \"awk '/^Mem/ {print $4}' <(free -m)\"")

演示：

双击节点进行选择。然后，单击突出显示所选按钮。

＆＃13;

＆＃13;

var selectedNodes = nodes.filter(function(d) {
    return d3.select(this).style("opacity") == 0.1;
});
selectedNodes.style("fill", newColor).style("opacity", "1");

＆＃13;

var svg = d3.select("#container").append("svg")
  .attr("width", 500)
  .attr("height", 500);
var data = [{
  x: 100,
  y: 70
}, {
  x: 200,
  y: 200
}, {
  x: 300,
  y: 70
},{
  x: 150,
  y: 250
}, {
  x: 320,
  y: 170
}, {
  x: 380,
  y: 250
}]
var nodes = svg.selectAll(".node").data(data).enter().append("circle").attr("cx", function(d) {
  return d.x
}).attr("cy", function(d) {
  return d.y
}).attr("r", 12).on("dblclick", function() {
  d3.select(this).style("opacity", "0.1");
});

function highlightSelected() {
  var selectedNodes = nodes.filter(function(d) {
    return d3.select(this).style("opacity") == 0.1;
  });
  selectedNodes.style("fill", "green").style("opacity", "1");
}

＆＃13;

svg {
  background-color: black;
}
circle {
  fill: red;
}
input {
  position:absolute;
  left: 385px;
  top: 13px;
  color: blue;
  font-weight: bold;
}

＆＃13;

＆＃13;

＆＃13;