d3.js - 为什么 d3js exit().remove() 不起作用？-6ren

d3.js - 为什么 d3js exit().remove() 不起作用？

转载作者：行者123 更新时间：2023-12-04 22:59:16

25

4

据我所知，我是 d3js 的新手。

// links is an array and id is unique key
var pathData = paths.data(links, function(d) {return d.id;});

pathData.enter().append('').attr() ...

// in there will be delete all the duplicate items
pathData.exit().remove();

但是在我的代码中，它重新创建了一个节点。

这是我的完整代码 http://jsfiddle.net/yunfanyunfan/URpfB/34/

单击该行，会出现很多行，因为重复节点没有删除。

最佳答案

您需要路径选择的实时副本。您的原始代码只有初始快照。

.attr('d',需要在 UPDATE+ENTER 选择上，因为输入
选择将为零大小，因为您正在重新使用现有路径
每一次。

// set up SVG for D3
var width  = 960,
    height = 800;

var isWantToAddNode = false;
var svg = d3.select('body').select('svg')
    .attr('width', width)
    .attr('height', height);
var links = [{
    id:1,
    fromPoint: {x:5,y:5},
    toPoint: {x:50,y:50},
    params: 'android',
    color: '#000'
}];
var times = 0;
function initAllDef() {
    svg.select('#defs').append('svg:marker')
        .attr('id', 'arrow').attr("viewBox", "0 -5 10 10")
        .attr("refX", 9)
        .attr("refY", 0)
        .attr("markerWidth", 6)
        .attr("markerHeight", 6)
        .attr("orient", "auto")
        .append("path")
        .attr("d", "M0,-3L10,0L0,3")
        .attr('fill', '#000');
}

initAllDef();

// handles to link and node element groups
var paths = svg.select('#paths').selectAll('path');
var routeNodes = svg.select('#rects').selectAll('rects');


// update graph (called when needed)
function restart() {
    function rebuildLink() {
        //need a live selection
        var pathData = svg.select('#paths').selectAll('path').data(links, function(d){
            return d.id;
        });
        pathData.enter()
            .append('svg:path')
            .attr('class', 'link')
            .style('marker-end', 'url(#arrow)')
            .on('mousedown', function(d){
                times += 1;
                restart();
            });
        
        //path needs to be on update+enter
        pathData.attr('d', function(d) {
                var f = d.fromPoint, t = d.toPoint;
                return 'M' + (f.x + times * 10) + ',' + (f.y) + 'L' + t.x + ',' + t.y;
            });

        pathData.exit().remove();
    }

    rebuildLink();
}

function getStartPoint(rect) {
    return {
        x: rect.x + (rect.width>>1),
        y: rect.y + rect.height
    }
}

function getEndPoint(rect) {
    return {
        x: rect.x + (rect.width>>1),
        y: rect.y
    }
}


restart();

svg {
    background-color: #FFF;
    /*cursor: default;*/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

svg:not(.active):not(.ctrl) {
    cursor: crosshair;
}

path.link {
    fill: none;
    stroke: black;
    stroke-width: 2px;
    cursor: default;
}

svg:not(.active):not(.ctrl) path.link {
    cursor: pointer;
}

path.link.selected {
    stroke-dasharray: 10,2;
    color: blue;
    stroke: blue;
}

path.link.dragline {
    pointer-events: none;
}

path.link.hidden {
    stroke-width: 0;
}

circle.node {
    stroke-width: 1.5px;
    cursor: pointer;
}

circle.node.reflexive {
    stroke: #000 !important;
    stroke-width: 2.5px;
}

rect.route-node {
    cursor: pointer;
    stroke-width: 1px;
}

text {
    font: 12px sans-serif;
    pointer-events: none;
}

text.id {
    text-anchor: middle;
    font-weight: bold;
}

input {
    width: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<body>
    <svg>
        <defs id="defs"></defs>
        <g id="paths"></g>
        <g id="rects"></g>
    </svg>        
	</body>

关于d3.js - 为什么 d3js exit().remove() 不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30909472/

25

4

0

文章推荐： symfony - 将自己的操作添加到 SonataAdminBundle 下拉菜单

文章推荐： XSLT How to do a classic for x to y loop？

文章推荐： rest - 使用REST检查jenkins中的文件夹中是否存在作业

文章推荐： rest - 使用 Angular 前端和 Drupal 7 后端处理 CSRF/XSRF token

php - exit, exit(), exit(0), die(), die(0) - 如何退出脚本
我相信所有这些(甚至是 die() 或 die(0))都是相同的。如果它们不相同，那么哪个更适合成功退出脚本？如果它们相同，是否有任何首选标准表明脚本成功完成？我倾向于使用 exit;. 编辑:所有答
java - 系统差异。 Java 中的 exit(0) 、 System.exit(-1)、 System.exit(1 )
我想知道Java中以下之间的区别 System.exit(0);System.exit(-1);System.exit(1); 我什么时候必须适本地使用上面的代码？
Powershell:exit 和 exit with a value 的区别
我注意到 Powershell 中有一个奇怪的行为。有两个 .ps1 文件: main.ps1: echo "running exit.ps1" $myexitcode = & ".\exit.p
anylogic - Anylogic 中的 "On exit"与 "On at exit"
Anylogic Process Modeling Library 中很少有像“Source”这样的 block 具有“On exit”和“On at exit”这样的操作。两者有什么区别？我试图创
Bash 脚本 : `exit 0` fails to exit
所以我有这个 Bash 脚本: #!/bin/bash PID=`ps -u ...` if [ "$PID" = "" ]; then echo $(date) Server off: no
exit - libc.so 中的 exit 和 _exit 有什么区别？
(gdb) info symbol exit exit in section .text of /lib64/libc.so.6 (gdb) info symbol _exit _exit in se
flutter - 为什么我会收到错误 : ADB exited with exit code 1
如果我想启动一个简单的应用程序，几周前我使用它没有出现错误，我会收到错误消息。那是他的错误描述: Launching lib\main.dart on SM J530F in debug mode..
java - System.exit(0); 之间的区别和 Platform.exit();？
这个问题已经有答案了: Using Platform.exit() and System.exit(int) together (3 个回答) 已关闭 5 年前。这里有人建议使用后者。我是java新
bash - `exit $?` 与 bash 中的 `exit` 有什么不同吗？
我的理解是，在 bash 中，一个普通的 exit 将完成一个具有最后一个命令的退出状态的脚本。但我也看到有人使用 exit $? 并且当我建议它具有相同的行为时被质疑。这两个脚本之间有什么有意义的
php - echo ('exit' ); 之间有什么区别？死;并死于 ('exit')；？
我看到一些代码是这样做的: if(something){ echo 'exit from program'; die; } ...more code 和其他只使用 die 的人: if
ruby - exit 和 exit 有什么区别!在 ruby ？
exit和exit有什么区别!在 ruby 中？最佳答案一些事情: 退出处理程序以“退出”形式而非“退出!”形式运行。这意味着分配给“清理”的任何代码都不会使用“退出!”运行 “退出状态”在“退出
powershell - "|| exit/b"和 "|| exit/b !errorlevel!"的区别
我们有一堆 .bat构建脚本由基于 PowerShell 的 GitLab 运行程序调用，这些脚本最近从以下内容重构: program args if !errorlevel! neq 0 exit
java - 一起使用 Platform.exit() 和 System.exit(int)
我想关闭具有指定返回码的 javafx 应用程序。浏览 SO 上的答案，我发现了以下成语: Platform.exit(); System.exit(0); 例如这里: Stop threads be
c++ - C++ 中的 exit 和 std::exit 有什么区别？
exit 和 C++ 中的 std::exit 有什么区别？我已经对其进行了研究，但我找不到任何东西。这两个代码有什么区别: 1: if(SDL_Init(SDL_INIT_EVERYTHING)
python - 为什么方法 sys.exit()、exit()、raise SystemExit 不起作用？
我需要一个替代方法来在线程函数内终止 python 脚本。我的意图是在客户端输入 0 时终止服务器...这是否不起作用，因为线程尚未终止？这是我的代码: socket = socket.socket(
android - 什么时候使用 System.exit(0) 和 System.exit(2)？
我想在崩溃后重新启动应用程序。我正在使用下面的代码来执行该任务。 Intent mStartActivity = new Intent(HomeActivity.this, SplashScreen
delphi - Exit(1) 或 Result := 1; Exit in Delphi? 之间有什么区别
在Delphi中，你可以退出一个函数并给它一个返回值，这与C/C++/Java/C#等中的return关键字非常相似 Exit(1); 但是，我通常会写这样的内容: Result := 1; Exit
javascript - ExtJS : handling browser exit event (click on cross-exit)
我想知道是否有任何方法可以处理浏览器退出事件。例如，我想在用户单击交叉退出或关闭浏览器时发送查询。最佳答案我想我已经找到了解决办法。我没有在 IE 上测试过它，但它似乎在 Firefox 上运行
Bash:使用 exit ${1:0} 而不是 exit $1 有什么好处
我在 Archlinux 的 mkinitcpio 脚本中找到了以下代码片段。 cleanup() { if [[ $workdir ]]; then # when PRESE
python - 如何修复pyspark中的 'Container exited with a non-zero exit code 143'错误
我使用以下代码计算数据帧所有行之间的余弦相似度: from pyspark.ml.feature import Normalizer from pyspark.mllib.linalg.distrib

首页

博学

6Ren·AI

商城

d3.js - 为什么 d3js exit().remove() 不起作用？