javascript - D3.js 高亮相关节点/链接-6ren

javascript - D3.js 高亮相关节点/链接

转载作者：行者123 更新时间：2023-12-04 17:14:26

问题:我想根据链接类型淡化/突出显示整个依赖链。

为此，我使用了 mouseEnter 事件，该事件当前存储所有链接和节点。此外，我淡化所有节点和链接，只突出显示那些被过滤为相关节点和链接的节点。它需要再次检查所有相关的节点和链接，如果它们也有来自 need 类型的连接。只要找到依赖关系就必须这样做。我想不出合适的算法。

示例:

为了更好地理解，我创建了一个啤酒成分依赖项，它看起来像一个星星。出于这些目的，我的版本很好。但是第二条链，关于汽车 -> 车轮 -> 轮胎 -> 橡胶和 radio 让我头疼。 radio 是一个“use”依赖项，这意味着它对链不是强制性的，不应该被突出显示。

预期结果:

如果光标在 car 上，所有具有“需要”依赖关系的连接节点都应该突出显示，其余的应该淡出。

对于那些想帮助我的人，如果有任何不清楚的地方，请不要犹豫。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- d3.js framework -->
    <script src="https://d3js.org/d3.v6.js"></script>
    <!-- fontawesome stylesheet https://fontawesome.com/ -->
    <script src="https://kit.fontawesome.com/39094309d6.js" crossorigin="anonymous"></script>
</head>

<style>
    body {
        height: 100%;
        background: #e6e7ee;
        overflow: hidden;
        margin: 0px;
    }

    .faded {
        opacity: 0.1;
        transition: 0.3s opacity;
    }

    .highlight {
        opacity: 1;
    }
</style>

<body>
    <svg id="svg"></svg>

    <script>
        var graph = {
            "nodes": [
                {
                    "id": 0,
                    "name": "beer",
                },
                {
                    "id": 1,
                    "name": "water",
                },
                {
                    "id": 2,
                    "name": "hop",
                },
                {
                    "id": 3,
                    "name": "malt",
                },
                {
                    "id": 4,
                    "name": "yeast",
                },
                {
                    "id": 10,
                    "name": "car",
                },
                {
                    "id": 11,
                    "name": "wheels",
                },
                {
                    "id": 12,
                    "name": "tires",
                },
                {
                    "id": 13,
                    "name": "rubber",
                },
                {
                    "id": 14,
                    "name": "radio",
                }
            ],
            "links": [
                {
                    "source": 0,
                    "target": 1,
                    "type": "need"
                },
                {
                    "source": 0,
                    "target": 2,
                    "type": "need"
                },
                {
                    "source": 0,
                    "target": 3,
                    "type": "need"
                },
                {
                    "source": 0,
                    "target": 4,
                    "type": "need"
                },
                {
                    "source": 10,
                    "target": 11,
                    "type": "need"
                },
                {
                    "source": 11,
                    "target": 12,
                    "type": "need"
                },
                {
                    "source": 12,
                    "target": 13,
                    "type": "need"
                },
                {
                    "source": 10,
                    "target": 14,
                    "type": "use"
                }

            ]
        }

        var svg = d3.select("svg")
            .attr("class", "canvas")
            .attr("width", window.innerWidth)
            .attr("height", window.innerHeight)
            .call(d3.zoom().on("zoom", function (event) {
                svg.attr("transform", event.transform)
            }))
            .append("g")

        // append markers to svg
        svg.append("defs").append("marker")
            .attr("id", "arrowhead")
            .attr("viewBox", "-0 -5 10 10")
            .attr("refX", 8)
            .attr("refY", 0)
            .attr("orient", "auto")
            .attr("markerWidth", 50)
            .attr("markerHeight", 50)
            .attr("xoverflow", "visible")
            .append("svg:path")
            .attr("d", "M 0,-1 L 2 ,0 L 0,1")
            .attr("fill", "black")
            .style("stroke", "none")

        var linksContainer = svg.append("g").attr("class", linksContainer)
        var nodesContainer = svg.append("g").attr("class", nodesContainer)

        var force = d3.forceSimulation()
            .force("link", d3.forceLink().id(function (d) {
                return d.id
            }).distance(80))
            .force("charge", d3.forceManyBody().strength(-100))
            .force("center", d3.forceCenter(window.innerWidth / 2, window.innerHeight / 2))
            .force("collision", d3.forceCollide().radius(90))

        initialize()

        function initialize() {

            link = linksContainer.selectAll(".link")
                .data(graph.links)
                .join("line")
                .attr("class", "link")
                .attr('marker-end', 'url(#arrowhead)')
                .style("display", "block")
                .style("stroke", "black")
                .style("stroke-width", 1)

            linkPaths = linksContainer.selectAll(".linkPath")
                .data(graph.links)
                .join("path")
                .style("pointer-events", "none")
                .attr("class", "linkPath")
                .attr("fill-opacity", 1)
                .attr("stroke-opacity", 1)
                .attr("id", function (d, i) { return "linkPath" + i })
                .style("display", "block")

            linkLabels = linksContainer.selectAll(".linkLabel")
                .data(graph.links)
                .join("text")
                .style("pointer-events", "none")
                .attr("class", "linkLabel")
                .attr("id", function (d, i) { return "linkLabel" + i })
                .attr("font-size", 16)
                .attr("fill", "black")
                .text("")

            linkLabels
                .append("textPath")
                .attr('xlink:href', function (d, i) { return '#linkPath' + i })
                .style("text-anchor", "middle")
                .style("pointer-events", "none")
                .attr("startOffset", "50%")
                .text(function (d) { return d.type })

            node = nodesContainer.selectAll(".node")
                .data(graph.nodes, d => d.id)
                .join("g")
                .attr("class", "node")
                .call(d3.drag()
                    .on("start", dragStarted)
                    .on("drag", dragged)
                    .on("end", dragEnded)
                )

            node.selectAll("circle")
                .data(d => [d])
                .join("circle")
                .attr("r", 30)
                .style("fill", "whitesmoke")
                .on("mouseenter", mouseEnter)
                .on("mouseleave", mouseLeave)

            node.selectAll("text")
                .data(d => [d])
                .join("text")
                .style("class", "icon")
                .attr("font-family", "FontAwesome")
                .attr("dominant-baseline", "central")
                .attr("text-anchor", "middle")
                .attr("font-size", 20)
                .attr("fill", "black")
                .attr("pointer-events", "none")
                .attr("dy", "-1em")
                .text(function (d) {
                    return d.name
                })
            node.append("text")
                .attr("dominant-baseline", "central")
                .attr("text-anchor", "middle")
                .attr("font-size", 13)
                .attr("fill", "black")
                .attr("pointer-events", "none")
                .attr("dy", "0.5em")
                .text(function (d) {
                    return d.id
                })

            force
                .nodes(graph.nodes)
                .on("tick", ticked);

            force
                .force("link")
                .links(graph.links)
        }

        function mouseEnter(event, d) {
            const selNodes = node.selectAll("circle")
            const selLink = link
            const selLinkLabel = linkLabels
            const selText = node.selectAll("text")
            const related = []
            const relatedLinks = []

            related.push(d)
            force.force('link').links().forEach((link) => {
                if (link.source === d || link.target === d) {
                    relatedLinks.push(link)
                    if (related.indexOf(link.source) === -1) { related.push(link.source) }
                    if (related.indexOf(link.target) === -1) { related.push(link.target) }
                }
            })
            selNodes.classed('faded', true)
            selNodes.filter((dNodes) => related.indexOf(dNodes) > -1)
                .classed('highlight', true)
            selLink.classed('faded', true)
            selLink.filter((dLink) => dLink.source === d || dLink.target === d)
                .classed('highlight', true)
            selLinkLabel.classed('faded', true)
            selLinkLabel.filter((dLinkLabel) => dLinkLabel.source === d || dLinkLabel.target === d)
                .classed('highlight', true)
            selText.classed('faded', true)
            selText.filter((dText) => related.indexOf(dText) > -1)
                .classed('highlight', true)
            
            force.alphaTarget(0.0001).restart()
        }

        function mouseLeave(event, d) {
            const selNodes = node.selectAll("circle")
            const selLink = link
            const selLinkLabel = linkLabels
            const selText = node.selectAll("text")

            selNodes.classed('faded', false)
            selNodes.classed('highlight', false)
            selLink.classed('faded', false)
            selLink.classed('highlight', false)
            selLinkLabel.classed('faded', false)
            selLinkLabel.classed('highlight', false)
            selText.classed('faded', false)
            selText.classed('highlight', false)
            
            force.restart()
        }

        function ticked() {
            // update link positions
            link
                .attr("x1", function (d) {
                    return d.source.x;
                })
                .attr("y1", function (d) {
                    return d.source.y;
                })
                .attr("x2", function (d) {
                    return d.target.x;
                })
                .attr("y2", function (d) {
                    return d.target.y;
                });

            // update node positions
            node
                .attr("transform", function (d) {
                    return "translate(" + d.x + ", " + d.y + ")";
                });

            linkPaths.attr('d', function (d) {
                return 'M ' + d.source.x + ' ' + d.source.y + ' L ' + d.target.x + ' ' + d.target.y;
            });

            linkLabels.attr('transform', function (d) {
                if (d.target.x < d.source.x) {
                    var bbox = this.getBBox();

                    rx = bbox.x + bbox.width / 2;
                    ry = bbox.y + bbox.height / 2;
                    return 'rotate(180 ' + rx + ' ' + ry + ')';
                }
                else {
                    return 'rotate(0)';
                }
            });

        }

        function dragStarted(event, d) {
            if (!event.active) force.alphaTarget(0.3).restart();
            d.fx = d.x;
            d.fy = d.y;

            PosX = d.x
            PosY = d.y
        }

        function dragged(event, d) {
            d.fx = event.x;
            d.fy = event.y;
        }

        function dragEnded(event, d) {
            if (!event.active) force.alphaTarget(0);
            d.fx = undefined;
            d.fy = undefined;
        }

    </script>
</body>

</html>

最佳答案

要让淡入淡出/高光运行，您可以考虑几个问题:

首先，注意 force方法改变了 links graph 中的数组.

例如，您的第一个链接是这样开始的:

{
  "source": 0,
  "target": 1,
  "type": "need"
}

但变成这样:

{
  "index": 0
  "source": {
    "id": 0
    "index": 0
    "name": "beer"
    "vx": 0.036971029563580046
    "vy": 0.04369386654517388
    "x": 394.1514674087123
    "y": 220.18458726626062
  },
  "target": {
    "id": 1
    "index": 1
    "name": "water"
    "vx": -0.021212609689083086
    "vy": 0.01105162589441528
    "x": 568.911363724937
    "y": 177.07991527420614
  },
  "type": "need"
}

因此您需要一个递归函数，但如果您引用 link.source，您将得到空数组- 相反，您需要引用 link.source.id因为这就是force已根据上述示例更新了您的图形对象。

这是一个相当冗长的递归函数，它返回给定节点 ID 的所有节点和链接，这些节点和链接由给定 type 的链接链接。 :

function nodesByTypeAfterForce(nodeId, sieved, type) {

  // get the links for the node per the type
  const newLinks = graph.links
    .filter(link => link.type === type && link.source.id === nodeId);

  // get the linked nodes to nodeId from the links 
  const newNodes = newLinks
    .map(link => graph.nodes.find(newNode => newNode.id === link.target.id));

  // concatenate new nodes and links
  (sieved.links = sieved.links || []).push(...newLinks);
  (sieved.nodes = sieved.nodes || []).push(...newNodes);

  // recursively visit linked nodes until exhausted options
  newNodes.forEach(node => nodesByTypeAfterForce(node.id, sieved, type));

  // return indices relevant nodes and links
  return {
    nodes: sieved.nodes.map(node => node.index),
    links: sieved.links.map(link => link.index)
  };
}

注意该函数返回一个 index 的数组这是一个属性 force分配给每个节点和链接。这使得稍后对淡入淡出/突出显示的过滤更加明确。

现在，在 mouseEnter你可以通过调用这个函数来开始，只返回由某个 type 的链接链接在一起的节点。并通过 d初始化搜索:

function mouseEnter(event, d) {

  // sub graph for the hovered node
  const sieved = nodesByTypeAfterForce(d.id, {nodes: [d]}, "need");
  //...
}

它取代了 related 的构造在您的 OP 中与 type 无关的数组.虽然这很容易解决，但您当前 mouseEnter 中的另一个问题是你有这些线。

selLink
  .filter((dLink) => dLink.source === d || dLink.target === d)

和

selLinkLabel
  .filter((dLinkLabel) => dLinkLabel.source === d || dLinkLabel.target === d)
  .classed('highlight', true)

这导致链接(和链接标签)突出显示到任何链接节点，而不仅仅是由 type 链接的节点。 (例如 need )。

所以，我建议你用这个代码块替换(我移动了所有行以将所有内容淡化到它们自己的部分):

// only highlight from sieved
node.selectAll("circle")
  .filter(node => sieved.nodes.indexOf(node.index) > -1)
  .classed('highlight', true)
link
  .filter(link => sieved.links.indexOf(link.index) > -1)
  .classed('highlight', true)
linkLabels
  .filter(link => sieved.links.indexOf(link.index) > -1)
  .classed('highlight', true)
node.selectAll("text")
  .filter(node => sieved.nodes.indexOf(node.index) > -1)
  .classed('highlight', true)

现在根据 index 仅突出显示节点和链接从 nodeByTypeAfterForce 返回上面的功能。

工作示例在下面，其中 nodeByTypeAfterForce在 graph 的定义之后被丢弃唯一的其他编辑在 mouseEnter 中:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- d3.js framework -->
    <script src="https://d3js.org/d3.v6.js"></script>
    <!-- fontawesome stylesheet https://fontawesome.com/ -->
    <script src="https://kit.fontawesome.com/39094309d6.js" crossorigin="anonymous"></script>
</head>

<style>
    body {
        height: 100%;
        background: #e6e7ee;
        overflow: hidden;
        margin: 0px;
    }

    .faded {
        opacity: 0.1;
        transition: 0.3s opacity;
    }

    .highlight {
        opacity: 1;
    }
</style>

<body>
    <svg id="svg"></svg>

    <script>
        var graph = {
            "nodes": [
                {
                    "id": 0,
                    "name": "beer",
                },
                {
                    "id": 1,
                    "name": "water",
                },
                {
                    "id": 2,
                    "name": "hop",
                },
                {
                    "id": 3,
                    "name": "malt",
                },
                {
                    "id": 4,
                    "name": "yeast",
                },
                {
                    "id": 10,
                    "name": "car",
                },
                {
                    "id": 11,
                    "name": "wheels",
                },
                {
                    "id": 12,
                    "name": "tires",
                },
                {
                    "id": 13,
                    "name": "rubber",
                },
                {
                    "id": 14,
                    "name": "radio",
                }
            ],
            "links": [
                {
                    "source": 0,
                    "target": 1,
                    "type": "need"
                },
                {
                    "source": 0,
                    "target": 2,
                    "type": "need"
                },
                {
                    "source": 0,
                    "target": 3,
                    "type": "need"
                },
                {
                    "source": 0,
                    "target": 4,
                    "type": "need"
                },
                {
                    "source": 10,
                    "target": 11,
                    "type": "need"
                },
                {
                    "source": 11,
                    "target": 12,
                    "type": "need"
                },
                {
                    "source": 12,
                    "target": 13,
                    "type": "need"
                },
                {
                    "source": 10,
                    "target": 14,
                    "type": "use"
                }

            ]
        }


        function nodesByTypeAfterForce(nodeId, sieved, type) {

          // get the links for the node per the type
          const newLinks = graph.links
            .filter(link => link.type === type && link.source.id === nodeId);

          // get the linked nodes to nodeId from the links 
          const newNodes = newLinks
            .map(link => graph.nodes.find(newNode => newNode.id === link.target.id));

          // concatenate new nodes and links
          (sieved.links = sieved.links || []).push(...newLinks);
          (sieved.nodes = sieved.nodes || []).push(...newNodes);

          // recursively visit linked nodes until exhausted options
          newNodes.forEach(node => nodesByTypeAfterForce(node.id, sieved, type));

          // return indices relevant nodes and links
          return {
            nodes: sieved.nodes.map(node => node.index),
            links: sieved.links.map(link => link.index)
          };
        }

        var svg = d3.select("svg")
            .attr("class", "canvas")
            .attr("width", window.innerWidth)
            .attr("height", window.innerHeight)
            .call(d3.zoom().on("zoom", function (event) {
                svg.attr("transform", event.transform)
            }))
            .append("g")

        // append markers to svg
        svg.append("defs").append("marker")
            .attr("id", "arrowhead")
            .attr("viewBox", "-0 -5 10 10")
            .attr("refX", 8)
            .attr("refY", 0)
            .attr("orient", "auto")
            .attr("markerWidth", 50)
            .attr("markerHeight", 50)
            .attr("xoverflow", "visible")
            .append("svg:path")
            .attr("d", "M 0,-1 L 2 ,0 L 0,1")
            .attr("fill", "black")
            .style("stroke", "none")

        var linksContainer = svg.append("g").attr("class", linksContainer)
        var nodesContainer = svg.append("g").attr("class", nodesContainer)

        var force = d3.forceSimulation()
            .force("link", d3.forceLink().id(function (d) {
                return d.id
            }).distance(80))
            .force("charge", d3.forceManyBody().strength(-100))
            .force("center", d3.forceCenter(window.innerWidth / 2, window.innerHeight / 2))
            .force("collision", d3.forceCollide().radius(90))

        initialize()

        function initialize() {

            link = linksContainer.selectAll(".link")
                .data(graph.links)
                .join("line")
                .attr("class", "link")
                .attr('marker-end', 'url(#arrowhead)')
                .style("display", "block")
                .style("stroke", "black")
                .style("stroke-width", 1)

            linkPaths = linksContainer.selectAll(".linkPath")
                .data(graph.links)
                .join("path")
                .style("pointer-events", "none")
                .attr("class", "linkPath")
                .attr("fill-opacity", 1)
                .attr("stroke-opacity", 1)
                .attr("id", function (d, i) { return "linkPath" + i })
                .style("display", "block")

            linkLabels = linksContainer.selectAll(".linkLabel")
                .data(graph.links)
                .join("text")
                .style("pointer-events", "none")
                .attr("class", "linkLabel")
                .attr("id", function (d, i) { return "linkLabel" + i })
                .attr("font-size", 16)
                .attr("fill", "black")
                .text("")

            linkLabels
                .append("textPath")
                .attr('xlink:href', function (d, i) { return '#linkPath' + i })
                .style("text-anchor", "middle")
                .style("pointer-events", "none")
                .attr("startOffset", "50%")
                .text(function (d) { return d.type })

            node = nodesContainer.selectAll(".node")
                .data(graph.nodes, d => d.id)
                .join("g")
                .attr("class", "node")
                .call(d3.drag()
                    .on("start", dragStarted)
                    .on("drag", dragged)
                    .on("end", dragEnded)
                )

            node.selectAll("circle")
                .data(d => [d])
                .join("circle")
                .attr("r", 30)
                .style("fill", "whitesmoke")
                .on("mouseenter", mouseEnter)
                .on("mouseleave", mouseLeave)

            node.selectAll("text")
                .data(d => [d])
                .join("text")
                .style("class", "icon")
                .attr("font-family", "FontAwesome")
                .attr("dominant-baseline", "central")
                .attr("text-anchor", "middle")
                .attr("font-size", 20)
                .attr("fill", "black")
                .attr("pointer-events", "none")
                .attr("dy", "-1em")
                .text(function (d) {
                    return d.name
                })
            node.append("text")
                .attr("dominant-baseline", "central")
                .attr("text-anchor", "middle")
                .attr("font-size", 13)
                .attr("fill", "black")
                .attr("pointer-events", "none")
                .attr("dy", "0.5em")
                .text(function (d) {
                    return d.id
                })

            force
                .nodes(graph.nodes)
                .on("tick", ticked);

            force
                .force("link")
                .links(graph.links)
        }

        function mouseEnter(event, d) {

            // sub graph for the hovered node
            const sieved = nodesByTypeAfterForce(d.id, {nodes: [d]}, "need");
            
            // fade everything
            node.selectAll("circle").classed('faded', true)
            node.selectAll("circle").classed('highlight', false)
            link.classed('faded', true)
            link.classed('highlight', false)
            linkLabels.classed('faded', true)
            linkLabels.classed('highlight', false)
            node.selectAll("text").classed('faded', true)
            node.selectAll("text").classed('highlight', false)
            
            // only highlight from sieved
            node.selectAll("circle")
              .filter(node => sieved.nodes.indexOf(node.index) > -1)
              .classed('highlight', true)
            link
              .filter(link => sieved.links.indexOf(link.index) > -1)
              .classed('highlight', true)
            linkLabels
              .filter(link => sieved.links.indexOf(link.index) > -1)
              .classed('highlight', true)
            node.selectAll("text")
              .filter(node => sieved.nodes.indexOf(node.index) > -1)
              .classed('highlight', true)
            
            force.alphaTarget(0.0001).restart()
        }

        function mouseLeave(event, d) {
            const selNodes = node.selectAll("circle")
            const selLink = link
            const selLinkLabel = linkLabels
            const selText = node.selectAll("text")

            selNodes.classed('faded', false)
            selNodes.classed('highlight', false)
            selLink.classed('faded', false)
            selLink.classed('highlight', false)
            selLinkLabel.classed('faded', false)
            selLinkLabel.classed('highlight', false)
            selText.classed('faded', false)
            selText.classed('highlight', false)
            
            force.restart()
        }

        function ticked() {
            // update link positions
            link
                .attr("x1", function (d) {
                    return d.source.x;
                })
                .attr("y1", function (d) {
                    return d.source.y;
                })
                .attr("x2", function (d) {
                    return d.target.x;
                })
                .attr("y2", function (d) {
                    return d.target.y;
                });

            // update node positions
            node
                .attr("transform", function (d) {
                    return "translate(" + d.x + ", " + d.y + ")";
                });

            linkPaths.attr('d', function (d) {
                return 'M ' + d.source.x + ' ' + d.source.y + ' L ' + d.target.x + ' ' + d.target.y;
            });

            linkLabels.attr('transform', function (d) {
                if (d.target.x < d.source.x) {
                    var bbox = this.getBBox();

                    rx = bbox.x + bbox.width / 2;
                    ry = bbox.y + bbox.height / 2;
                    return 'rotate(180 ' + rx + ' ' + ry + ')';
                }
                else {
                    return 'rotate(0)';
                }
            });

        }

        function dragStarted(event, d) {
            if (!event.active) force.alphaTarget(0.3).restart();
            d.fx = d.x;
            d.fy = d.y;

            PosX = d.x
            PosY = d.y
        }

        function dragged(event, d) {
            d.fx = event.x;
            d.fy = event.y;
        }

        function dragEnded(event, d) {
            if (!event.active) force.alphaTarget(0);
            d.fx = undefined;
            d.fy = undefined;
        }

    </script>
</body>

</html>

如果您定义这样的链接，您将遇到堆栈溢出，例如用“酵母”:

"links": [ // Yeast need yeast ??
  {
    "source": 4,
    "target": 4,
    "type": "need"
  },
  ...
]

因此 nodesByTypeAfterForce 中需要一些额外的逻辑以适应自引用链接。

关于javascript - D3.js 高亮相关节点/链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68939086/

文章推荐： json - 使用 VBA 将数据从 JSON 写入 Excel

文章推荐： performance - dTrace 脚本和工具

文章推荐： java - 如何在 Java SE 11 中使用自定义注解？

JavaFX - 每行迭代 GridPane 节点 - 每行读取 GridPane 节点
我正在使用 JavaFX 8 创建一个应用程序。我使用拖/放动态更改网格 Pane 的内容。我希望每行或每行/列迭代 GridPane 内容。JavaFX 允许通过指定行和列在 GridPane 中添
javascript - 错误:无法在“节点”上执行“appendChild”:参数1不是“节点”类型
我正在尝试将图像拖放到div上。图像没有被拖到div上并给出以下错误 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': pa
java - 如何在 ARcore 的帮助下相对于一个 anchor 定位 anchor /节点/ anchor 节点？
我正在 android studio 中创建内部构建 AR 导航。我正在寻找一种方法将 anchor 与其他 anchor 或 anchor 节点/节点“连接”起来。我不确定使用哪一个。基于我将强制用
hadoop - 我的 2 节点 hadoop 比我的 4 节点 hadoop 表现更好
我在 Hive 上运行一些作业:首先是 4 节点，然后是 2 节点。令我惊讶的是，我的 2 节点性能比我的 4 节点更好。首先，我在一个 4 节点(4 个事件节点)上运行查询，然后关闭 2 个节点(
c++ - ' =' : cannot convert from ' CircularDoubleDirectedList::节点 *' to ' 节点 *'
我有 Node* current ，我在其中存储指向列表“顶部”当前节点的指针。当我将一个新节点设置为当前节点时，出现错误: '=' : cannot convert from 'CircularDo
linux - 无法使用 dcos 节点 ssh --master-proxy --leader sshing 进入 dcos 节点
我是 dcos Mesos 的新手，在本地 Ubuntu 机器上安装了 dc os。我可以查看 dcos 仪表板。但我无法使用 dcos node ssh --master-proxy --lea
JavaFX:如何定位组件/节点？
在 JavaFX 中，是否有类似 setLayout(); 的东西？或 setBounds(); ? 例如，我想将按钮定位到我想要的位置。最佳答案 JavaFX 场景图上的所有内容都是 Node .
JavaFX 节点 - 如何让最终用户调整它们的大小？
我正在开发一个 JavaFX 应用程序，其中我开发的类(从 javafx.scene.Parent 扩展)是根据用户在 ListView 控件中单击的条目动态创建的。只是要清楚这个节点，它不是使用像
uml - 节点-边缘关系的类图
我正在尝试为节点-边缘关系创建一个类图，因为它可以在有向图中找到。我想传达的是，Nodes 引用了 Edges，Edges 也引用了 Nodes。每个 Edge 都恰好需要两个 Node(源和目标)。
hadoop - 如何指定应在其上运行mapreduce的各个tasktrackers(节点)？
在mapreduce作业期间，单个任务将在随机节点上运行，是否有任何方法限制应在其中运行任务的节点？最佳答案 Hadoop不会选择节点来随机运行任务。考虑到数据局部性，否则将有很多网络开销。任务与
Cassandra 节点 - 重建与重建维修
有什么区别: a) nodetool 重建 b) nodetool 修复 [-pr] 换句话来说，各个命令到底是做什么的？最佳答案 nodetool重建:类似于引导过程(当您向集群添加新节点时)，但
java - 节点 : 没有数据类型
我已将第一个 OneToMany 关系添加到我的 hibernate 3.6.10 项目中。这是一个类: /** * */ package com.heavyweightsoftware.leal
javascript - 获取触发事件的元素(节点)
是否有可能找到正在监听触发当前函数的事件的元素？在下面的代码中，event.target 返回 #xScrollPane 和 event.currentTarget 和 event 的最低子节点.f
javascript - 覆盖数据而不生成新的键/节点
我正在尝试覆盖我数据库中的一些数据。结构很简单，就是: recipes { user_1{ recipe_1{data} recipe_2{data} } user_2{
javascript - 输入后运行JS函数，节点
我使用 setInterval 来运行该函数，但它会多次执行函数 2... 如何在输入中插入一个值后执行函数第一个输入与其余输入的距离不同如何在插入 val(tab 选项)后将插入从 1 个输入移
c++ - “节点”不是全局命名空间的成员？
我不知道代码有什么问题，但在 visual studio 中不断收到这些错误消息。 Error 18 error C1903: unable to recover from previous e
JavaScript/jQuery 节点
我正在尝试从其类中获取 SharePoint 搜索导航节点的对象。 var nodes = $("div.ms-qSuggest-listItem"); 我正在获取节点对象，现在想要获取“_promp
javascript - 节点|运行JS文件时出错
D:\nodeP>node main.js module.js:327 抛出错误； ^ 错误:在 Function.Module 的 Function.Module._resolveFilename
c++ - 节点(){}是什么意思？
struct node{ int key, prior, cnt, val; node *l, *r; node(){} node(int nkey) : key(nkey),
c++ - 如何删除正在使用的对象(节点)
我有以下代码使用迭代器将项目插入双链表。这就是我们被要求这样做的方式。代码有效，但问题是我有 24 字节的绝对内存泄漏。 NodeIterator insert(NodeIterator & itrP

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - D3.js 高亮相关节点/链接