D3 v4 更改 kontext 相关节点的不透明度

Question

我对 D3 完全陌生，正在尝试解决以下场景。我有几个与上下文相关的节点。所有这些都按照我想要的方式显示得很好，此外我想添加一个 HTML 选择器按钮，它可以更改所有未选择的节点的颜色和不透明度。

目标是通过更改未选定节点的颜色和不透明度来突出显示选择。我不想像这里那样完全删除它们，因为某些节点将来将成为多个上下文的成员。

我认为我们社区的群体智能可能会想到一个主意。提前致谢。

Answer 1

您将希望选择菜单具有代表每个上下文的值：&nbsp; <select>&nbsp; &nbsp; <option value="Jira">01 - Jira</option>&nbsp; &nbsp; <option value="Ivis">02 - Ivis</option>&nbsp; &nbsp; <option value="All" selected>Whatever</option>&nbsp; </select>然后你会想听听这种情况的改变。当它发生变化时，您会将所有节点恢复为正常状态，并过滤那些具有与所选节点匹配的上下文的节点。由于您有两个不同的子元素，因此您可能想要以不同的方式更改颜色和不透明度。下面我首先更改了标签和圆的不透明度，然后选择每个节点的圆并更改填充：d3.select("select").on("change", function() {&nbsp; var value = this.value;&nbsp;&nbsp;&nbsp;// Reset every node:&nbsp; node.style("opacity", 1) // change opacity back for every node&nbsp; &nbsp; &nbsp; .select("circle")&nbsp; &nbsp; // select the circle to alter its color&nbsp; &nbsp; &nbsp; .style("fill", function(d) { return color(d.group); });&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; // If "All" isn't selected, filter for the selected value:&nbsp; if(value != "All") {&nbsp; &nbsp; node.filter(function(d) { return d.kontext != value; })&nbsp; &nbsp; &nbsp; &nbsp; .style("opacity", 0.5) // Change the opacity of text and circle for filtered items&nbsp; &nbsp; &nbsp; &nbsp; .select("circle")&nbsp; &nbsp; &nbsp; // select the circle to alter its color&nbsp; &nbsp; &nbsp; &nbsp; .style("fill","#aaa");&nbsp; }})综合起来我们得到：var graph = {&nbsp; &nbsp; nodes:[&nbsp; &nbsp; &nbsp; &nbsp; {id: "0001", name: "s02vmware", kontext: "Jira", group: 1},&nbsp; &nbsp; &nbsp; &nbsp; {id: "0002", name: "v133atlas", kontext: "Jira", group: 2},&nbsp; &nbsp; &nbsp; &nbsp; {id: "0003", name: "Linux", kontext: "Jira", group: 2},&nbsp; &nbsp; &nbsp; &nbsp; {id: "0004", name: "PostgreSQL", kontext: "Jira", group: 2},&nbsp; &nbsp; &nbsp; &nbsp; {id: "0005", name: "OpenSSH", kontext: "Jira", group: 2},&nbsp; &nbsp; &nbsp; &nbsp; {id: "0006", name: "Nginx", kontext: "Jira", group: 2},&nbsp; &nbsp; &nbsp; &nbsp; {id: "0007", name: "Confluence", kontext: "Jira", group: 3},&nbsp; &nbsp; &nbsp; &nbsp; {id: "0008", name: "Tomcat", kontext: "Jira", group: 3},&nbsp; &nbsp; &nbsp; &nbsp; {id: "0009", name: "Java", kontext: "Jira", group: 3},&nbsp; &nbsp; &nbsp; &nbsp; {id: "0010", name: "Test1", kontext: "Ivis", group: 1},&nbsp; &nbsp; &nbsp; &nbsp; {id: "0011", name: "Test2", kontext: "Ivis", group: 2},&nbsp; &nbsp; &nbsp; &nbsp; {id: "0012", name: "Test3", kontext: "Ivis", group: 2},&nbsp; &nbsp; ],&nbsp; &nbsp; links:[&nbsp; &nbsp; &nbsp; &nbsp; {source: "0001", target: "0002"},&nbsp; &nbsp; &nbsp; &nbsp; {source: "0002", target: "0003"},&nbsp; &nbsp; &nbsp; &nbsp; {source: "0004", target: "0003"},&nbsp; &nbsp; &nbsp; &nbsp; {source: "0005", target: "0003"},&nbsp; &nbsp; &nbsp; &nbsp; {source: "0006", target: "0003"},&nbsp; &nbsp; &nbsp; &nbsp; {source: "0007", target: "0003"},&nbsp; &nbsp; &nbsp; &nbsp; {source: "0008", target: "0007"},&nbsp; &nbsp; &nbsp; &nbsp; {source: "0009", target: "0007"},&nbsp; &nbsp; &nbsp; &nbsp; {source: "0010", target: "0012"},&nbsp; &nbsp; &nbsp; &nbsp; {source: "0011", target: "0010"},&nbsp; &nbsp; &nbsp; &nbsp; {source: "0012", target: "0011"},&nbsp; &nbsp; ]};var svg = d3.select("svg"),&nbsp; &nbsp; width = 500,&nbsp; &nbsp; height = 300;var color = d3.scaleOrdinal(d3.schemeCategory20);var simulation = d3.forceSimulation()&nbsp;.force("link", d3.forceLink().id(function(d) { return d.id; }).distance(100))&nbsp;.force("charge", d3.forceManyBody())&nbsp;.force("center", d3.forceCenter(width / 2, height / 2))&nbsp;.force("attraceForce",d3.forceManyBody().strength(10));var link = svg.append("g")&nbsp; &nbsp; .attr("class", "links")&nbsp; &nbsp; .selectAll("line")&nbsp; &nbsp; .data(graph.links)&nbsp; &nbsp; .enter().append("line")&nbsp; &nbsp; .attr("stroke-width", 2);var node = svg.selectAll(".node")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .data(graph.nodes)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .enter().append("g")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .attr("class", "node")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .on("mouseover", mouseover)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .on("mouseout", mouseout)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /*&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .on("click", function(d) {&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; div.transition()&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .duration(200)&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .style("opacity", 0.9);&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; div .html((d.name) + "<br/>"&nbsp; + d.close)&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .style("left", (d3.event.pageX) + "px")&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .style("top", (d3.event.pageY - 28) + "px")*/&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .call(d3.drag()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .on("start", dragstarted)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .on("drag", dragged)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .on("end", dragended));node.append("circle")&nbsp; .attr("r", 15)&nbsp; .attr("fill", function(d) { return color(d.group); });node.append("text")&nbsp; &nbsp; .attr("dy", -20)&nbsp; &nbsp; .text(function(d) { return d.name; });simulation&nbsp; &nbsp;.nodes(graph.nodes)&nbsp; &nbsp;.on("tick", ticked);simulation.force("link")&nbsp; &nbsp;.links(graph.links);function ticked() {&nbsp; &nbsp;link&nbsp; &nbsp; .attr("x1", function(d) { return d.source.x; })&nbsp; &nbsp; .attr("y1", function(d) { return d.source.y; })&nbsp; &nbsp; .attr("x2", function(d) { return d.target.x; })&nbsp; &nbsp; .attr("y2", function(d) { return d.target.y; });&nbsp; &nbsp; node.attr("transform", function(d) {&nbsp; &nbsp; &nbsp; &nbsp; return "translate(" + d.x + "," + d.y + ")";&nbsp; &nbsp;});}function dragstarted(d) {&nbsp; if (!d3.event.active) simulation.alphaTarget(0.3).restart();&nbsp; d.fx = d.x;&nbsp; d.fy = d.y;}function dragged(d) {&nbsp; &nbsp;d.fx = d3.event.x;&nbsp; &nbsp;d.fy = d3.event.y;}function dragended(d) {&nbsp; &nbsp; if (!d3.event.active) simulation.alphaTarget(0);&nbsp; &nbsp; d.fx = null;&nbsp; &nbsp; d.fy = null;}function mouseover() {&nbsp; &nbsp; d3.select(this).select("circle").transition()&nbsp; &nbsp; &nbsp; &nbsp; .duration(100)&nbsp; &nbsp; &nbsp; &nbsp; .attr("r", 20);}function mouseout() {&nbsp; &nbsp; d3.select(this).select("circle").transition()&nbsp; &nbsp; &nbsp; &nbsp; .duration(500)&nbsp; &nbsp; &nbsp; &nbsp; .attr("r", 15);}d3.select("select").on("change", function() {&nbsp; var value = this.value;&nbsp;&nbsp;&nbsp;// Reset every node:&nbsp; node.style("opacity", 1) // change opacity back for every node&nbsp; &nbsp; &nbsp; .select("circle")&nbsp; &nbsp; // select the circle to alter its color&nbsp; &nbsp; &nbsp; .style("fill", function(d) { return color(d.group); });&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; // If "All" isn't selected, filter for the selected value:&nbsp; if(value != "All") {&nbsp; &nbsp; node.filter(function(d) { return d.kontext != value; })&nbsp; &nbsp; &nbsp; &nbsp; .style("opacity", 0.5) // Change the opacity of text and circle for filtered items&nbsp; &nbsp; &nbsp; &nbsp; .select("circle")&nbsp; &nbsp; &nbsp; // select the circle to alter its color&nbsp; &nbsp; &nbsp; &nbsp; .style("fill","#aaa");&nbsp; }})/* todo: add styles */.vertical-grid{&nbsp; &nbsp; stroke:#ccc;&nbsp; &nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp; .ordinate-text{&nbsp; &nbsp; font-size:10px;&nbsp; &nbsp; transform:translateY(10px);&nbsp; }&nbsp;&nbsp;&nbsp; div.tooltip {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; width: auto;&nbsp; &nbsp; height: auto;&nbsp; &nbsp; padding: 2px;&nbsp; &nbsp; font: 12px sans-serif;&nbsp; &nbsp; background: lightsteelblue;&nbsp; &nbsp; border: 0px;&nbsp; &nbsp; border-radius: 8px;&nbsp; &nbsp; pointer-events: none;&nbsp; &nbsp; opacity:0;&nbsp; &nbsp; padding:5px;&nbsp; }&nbsp;&nbsp;&nbsp; .right-align{&nbsp; &nbsp; position:absolute;&nbsp; &nbsp; right:100px;&nbsp; &nbsp;&nbsp;&nbsp; }&nbsp; .box,&nbsp; .label{&nbsp; &nbsp; &nbsp; display:inline-block;&nbsp; }&nbsp;&nbsp;&nbsp; .box{&nbsp; &nbsp; width:10px;&nbsp; &nbsp; height:10px;&nbsp; &nbsp; margin:0px 10px;&nbsp; }<!DOCTYPE html>&nbsp; &nbsp; <head>&nbsp; &nbsp; &nbsp; &nbsp; <meta charset = "utf-8">&nbsp; &nbsp; &nbsp; &nbsp; <link rel="stylesheet" type="text/css" href="style.css">&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <title>Ideal iDEP on D3.js</title>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</head>&nbsp; &nbsp;<body>&nbsp; &nbsp; &nbsp; <!-- Kontext Option Button -->&nbsp; &nbsp; &nbsp; <select>&nbsp; &nbsp; &nbsp; &nbsp; <option value="Jira">01 - Jira</option>&nbsp; &nbsp; &nbsp; &nbsp; <option value="Ivis">02 - Ivis</option>&nbsp; &nbsp; &nbsp; &nbsp; <option value="All" selected>Whatever</option>&nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; <!-- SVG as a canvas area -->&nbsp; &nbsp; &nbsp; <svg width="500" height="300"></svg>&nbsp; &nbsp; &nbsp; <!--<svg id="canvas" width="100%" height="100%"></svg> -->&nbsp; &nbsp; &nbsp; <!-- import d3.js library -->&nbsp; &nbsp; &nbsp; <script src="https://d3js.org/d3.v4.js"></script>&nbsp;&nbsp; &nbsp; &nbsp; <!-- where the magic is happening -->&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; <script type="" src="appv4.js"></script>&nbsp; &nbsp;</body></html>如果节点可以是多个上下文的一部分：{id:&nbsp;"0002",&nbsp;name:&nbsp;"name1",&nbsp;kontext:&nbsp;["ContextA"],&nbsp;group:&nbsp;2}, {id:&nbsp;"0003",&nbsp;name:&nbsp;"name2",&nbsp;kontext:&nbsp;["ContextA","ContextB"]&nbsp;,&nbsp;group:&nbsp;2},您需要检查所选上下文是否在 kontext 数组中，如果所有 kontext 属性都是数组（而不是某些字符串和数组），这也会更容易。如果 kontext 是一个数组，你会得到类似的东西：&nbsp;node.filter(function(d)&nbsp;{&nbsp;return&nbsp;d.kontext.indexOf(value)&nbsp;==&nbsp;-1;&nbsp;})