javascript - 使用 jQuery 的 D3.js 图的节点搜索栏-6ren

javascript - 使用 jQuery 的 D3.js 图的节点搜索栏

转载作者：行者123 更新时间：2023-11-27 22:52:20

我有一个网页，它使用 D3 javascript 库显示力定向图(具有其他功能)。我正在尝试添加一个节点搜索栏(使用 jQuery)，当我搜索节点的属性之一(名称、clusterID 等，在 json 文件的节点部分中找到)时，它会突出显示该节点。

因此，我的网页已正确显示图表上方的搜索栏，但搜索按钮未正确突出显示节点。每次在搜索栏中输入字符时，我都会收到一条 Chrome 控制台消息:VM84:1 Uncaught SyntaxError: Unexpected token < in JSON at position 0 。完整的信息位于问题的底部。此外，当我单击搜索按钮搜索其中一个节点的已知名称属性时，控制台中没有任何反应。

我似乎无法让 jQuery 和 D3 代码一起工作，特别是 $() 中的自动完成功能。 jQuery 函数和 searchNode graph.js 中的函数文件。

有人可以帮我吗？下面是 jsFiddle 链接、构建网页的 html 和 javascript 文件以及 Chrome 控制台消息的屏幕截图。感谢您的帮助!

jsFiddle:http://jsfiddle.net/spw1016/mc5Lprcr/

Chrome 控制台完整错误:

在搜索栏中输入后的完整错误消息:

Uncaught SyntaxError: Unexpected token < in JSON at position 0    VM89:1 

   parseJSON @ jquery-1.9.1.min.js:3
   transformResult @ jquery.autocomplete.min.js:10
   processResponse @ jquery.autocomplete.min.js:21
   (anonymous function) @ jquery.autocomplete.min.js:19
   c @ jquery-1.9.1.min.js:3
   fireWith @ jquery-1.9.1.min.js:3
   k @ jquery-1.9.1.min.js:5
   r @ jquery-1.9.1.min.js:5

index.html:

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
  overflow:hidden;
  overflow:hidden;
   margin:0;
}

text {
  font-family: sans-serif;
  pointer-events: none;
}
</style>
<head lang="en">
    <title>Graph Visualization</title>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.autocomplete.min.js"></script>
    <script type="text/javascript" src="js/currency-autocomplete.js"></script>
</head>
<body>
    <div class="ui-widget">
        <input id="search">
        <button type="button" .onclick="searchNode()">Search</button>
    </div>
</body>
<script src="graph.js"></script>
</html>

graph.js:

var w = window.innerWidth;
var h = window.innerHeight;

var keyc = true, keys = true, keyt = true, keyr = true, keyx = true, keyd = true, keyl = true, keym = true, keyh = true, key1 = true, key2 = true, key3 = true, key0 = true

var focus_node = null, highlight_node = null;

var text_center = false;
var outline = false;

var min_score = 1;
var max_score = 10;

/*
var color = d3.scale.linear()
  .domain(1, 10)
  .range(["lime", "yellow", "red"]);
*/

var color = d3.scale.linear()
  .domain([min_score, (min_score+max_score)/2, max_score])
  .range(["lime", "yellow", "red"]);

var highlight_color = "blue";
var highlight_trans = 0.1;

var size = d3.scale.pow().exponent(1)
  .domain([1,100])
  .range([8,24]);

var force = d3.layout.force()
  .linkDistance(60)
  .charge(-300)
  .size([w,h]);

var default_node_color = "#ccc";
//var default_node_color = "rgb(3,190,100)";
var default_link_color = "#888";
var nominal_base_node_size = 8;
var nominal_text_size = 10;
var max_text_size = 24;
var nominal_stroke = 1.5;
var max_stroke = 4.5;
var max_base_node_size = 36;
var min_zoom = 0.1;
var max_zoom = 7;
var svg = d3.select("body").append("svg");
var zoom = d3.behavior.zoom().scaleExtent([min_zoom,max_zoom])
var g = svg.append("g");
svg.style("cursor","move");
/*
var request = new XMLHttpRequest();
request.open("GET", "graph.json", false);
request.send(null)
var graph = JSON.parse(request.responseText);
*/

d3.json("graph.json", function(error, graph) {

    var linkedByIndex = {};
        graph.links.forEach(function(d) {
        linkedByIndex[d.source + "," + d.target] = true;
        });

        function isConnected(a, b) {
            return linkedByIndex[a.index + "," + b.index] || linkedByIndex[b.index + "," + a.index] || a.index == b.index;
        }

        function hasConnections(a) {
            for (var property in linkedByIndex) {
                    s = property.split(",");
                    if ((s[0] == a.index || s[1] == a.index) && linkedByIndex[property])                    return true;
            }
        return false;
        }

    force
    .nodes(graph.nodes)
    .links(graph.links)
    .start();

    var link = g.selectAll(".link")
    .data(graph.links)
    .enter().append("line")
    .attr("class", "link")
    .style("stroke-width",nominal_stroke)
    .style("stroke", default_link_color)


    var node = g.selectAll(".node")
    .data(graph.nodes)
    .enter().append("g")
    .attr("class", "node")

    .call(force.drag)


    node.on("dblclick.zoom", function(d) { d3.event.stopPropagation();
    var dcx = (window.innerWidth/2-d.x*zoom.scale());
    var dcy = (window.innerHeight/2-d.y*zoom.scale());
    zoom.translate([dcx,dcy]);
     g.attr("transform", "translate("+ dcx + "," + dcy  + ")scale(" + zoom.scale() + ")");


    });


    var tocolor = "fill";
    var towhite = "stroke";
    if (outline) {
        tocolor = "stroke"
        towhite = "fill"
    }

    var circle = node.append("path")


      .attr("d", d3.svg.symbol()
        .size(function(d) { return Math.PI*Math.pow(size(d.size)||nominal_base_node_size,2); })
        .type(function(d) { return d.type; }))

    .style("fill", function(d) {return color(d.clusterID);})
    .style("stroke-width", nominal_stroke)
    .style(towhite, "white");


    var text = g.selectAll(".text")
    .data(graph.nodes)
    .enter().append("text")
    .attr("dy", ".35em")
    .style("font-size", nominal_text_size + "px")

    if (text_center)
     text.text(function(d) { return d.name; })
    .style("text-anchor", "middle");
    else
    text.attr("dx", function(d) {return (size(d.size)||nominal_base_node_size);})
    .text(function(d) { return '\u2002'+d.name; });

    node.on("mouseover", function(d) {
    set_highlight(d);
    })
    .on("mousedown", function(d) { d3.event.stopPropagation();
    focus_node = d;
    set_focus(d)
    if (highlight_node === null) set_highlight(d)}).on("mouseout", function(d) {
        exit_highlight();});

        d3.select(window).on("mouseup",
        function() {
        if (focus_node!==null)
        {
            focus_node = null;
            if (highlight_trans<1)
            {

        circle.style("opacity", 1);
      text.style("opacity", 1);
      link.style("opacity", 1);
    }
        }

    if (highlight_node === null) exit_highlight();
        });

    function exit_highlight()
    {
            highlight_node = null;
        if (focus_node===null)
        {
            svg.style("cursor","move");
            if (highlight_color!="white")
        {
          circle.style(towhite, "white");
          text.style("font-weight", "normal");
          link.style("stroke", function(o) {return (isNumber(o.score) && o.score>=0)?color(o.score):default_link_color});
     }

        }
    }

    function set_focus(d)
    {
    if (highlight_trans<1)  {
        circle.style("opacity", function(o) {
                    return isConnected(d, o) ? 1 : highlight_trans;
                });

                text.style("opacity", function(o) {
                    return isConnected(d, o) ? 1 : highlight_trans;
                });

                link.style("opacity", function(o) {
                    return o.source.index == d.index || o.target.index == d.index ? 1 : highlight_trans;
                });
        }
    }


    function set_highlight(d)
    {
        svg.style("cursor","pointer");
        if (focus_node!==null) d = focus_node;
        highlight_node = d;

        if (highlight_color!="white")
        {
              circle.style(towhite, function(o) {
                    return isConnected(d, o) ? highlight_color : "white";});
                text.style("font-weight", function(o) {
                    return isConnected(d, o) ? "bold" : "normal";});
                link.style("stroke", function(o) {
                  return o.source.index == d.index || o.target.index == d.index ? highlight_color : ((isNumber(o.score) && o.score>=0)?color(o.score):default_link_color);

                });
        }
    }


    zoom.on("zoom", function() {

    var stroke = nominal_stroke;
    if (nominal_stroke*zoom.scale()>max_stroke) stroke = max_stroke/zoom.scale();
    link.style("stroke-width",stroke);
    circle.style("stroke-width",stroke);

    var base_radius = nominal_base_node_size;
    if (nominal_base_node_size*zoom.scale()>max_base_node_size) base_radius = max_base_node_size/zoom.scale();
        circle.attr("d", d3.svg.symbol()
        .size(function(d) { return Math.PI*Math.pow(size(d.size)*base_radius/nominal_base_node_size||base_radius,2); })
        .type(function(d) { return d.type; }))

    //circle.attr("r", function(d) { return (size(d.size)*base_radius/nominal_base_node_size||base_radius); })
    if (!text_center) text.attr("dx", function(d) { return (size(d.size)*base_radius/nominal_base_node_size||base_radius); });

    var text_size = nominal_text_size;
    if (nominal_text_size*zoom.scale()>max_text_size) text_size = max_text_size/zoom.scale();
    text.style("font-size",text_size + "px");

    g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
    });

    svg.call(zoom);

    resize();
    //window.focus();
    d3.select(window).on("resize", resize).on("keydown", keydown);

    force.on("tick", function() {

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

    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; });

    node.attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });
    });


    var optArray = [];
    for (var i = 0; i < graph.nodes.length - 1; i++) {
        optArray.push(graph.nodes[i].name);
    }
    optArray = optArray.sort();
    $(function () {
        $("#search").autocomplete({
            source: optArray
        });
    });
    function searchNode() {
        //find the node
        var selectedVal = document.getElementById('search').value;
        //node = svg.selectAll(".node");
        if (selectedVal == "none") {
            node.style("stroke", "white").style("stroke-width", "1");
        } else {
            var selected = node.filter(function (d, i) {
                return d.name != selectedVal;
            });
            selected.style("opacity", "0");
            //var link = svg.selectAll(".link")
            link.style("opacity", "0");
            d3.selectAll(".node, .link").transition()
                .duration(5000)
                .style("opacity", 1);
        }
    }


    function resize() {
        var width = window.innerWidth, height = window.innerHeight;
        svg.attr("width", width).attr("height", height);

        force.size([force.size()[0]+(width-w)/zoom.scale(),force.size()[1]+(height-h)/zoom.scale()]).resume();
        w = width;
        h = height;
        }

    function keydown() {
        if (d3.event.keyCode==32) {  force.stop();}
        else if (d3.event.keyCode>=48 && d3.event.keyCode<=90 && !d3.event.ctrlKey && !d3.event.altKey && !d3.event.metaKey)
            {
            switch (String.fromCharCode(d3.event.keyCode)) {
            case "C": keyc = !keyc; break;
            case "S": keys = !keys; break;
            case "T": keyt = !keyt; break;
            case "R": keyr = !keyr; break;
            case "X": keyx = !keyx; break;
            case "D": keyd = !keyd; break;
            case "L": keyl = !keyl; break;
            case "M": keym = !keym; break;
            case "H": keyh = !keyh; break;
            case "1": key1 = !key1; break;
            case "2": key2 = !key2; break;
            case "3": key3 = !key3; break;
            case "0": key0 = !key0; break;
            }

            link.style("display", function(d) {
                        var flag  = vis_by_type(d.source.type)&&vis_by_type(d.target.type)&&vis_by_node_score(d.source.score)&&vis_by_node_score(d.target.score)&&vis_by_link_score(d.score);
                        linkedByIndex[d.source.index + "," + d.target.index] = flag;
                      return flag?"inline":"none";});
            node.style("display", function(d) {
                        return (key0||hasConnections(d))&&vis_by_type(d.type)&&vis_by_node_score(d.score)?"inline":"none";});
            text.style("display", function(d) {
                        return (key0||hasConnections(d))&&vis_by_type(d.type)&&vis_by_node_score(d.score)?"inline":"none";});

                        if (highlight_node !== null)
                            {
                            if ((key0||hasConnections(highlight_node))&&vis_by_type(highlight_node.type)&&vis_by_node_score(highlight_node.score)) {
                            if (focus_node!==null) set_focus(focus_node);
                            set_highlight(highlight_node);}
                            else {exit_highlight();}
                            }
            }
        }
});


function vis_by_type(type)
{
    switch (type) {
      case "circle": return keyc;
      case "square": return keys;
      case "triangle-up": return keyt;
      case "diamond": return keyr;
      case "cross": return keyx;
      case "triangle-down": return keyd;
      default: return true;
}
}
function vis_by_node_score(score)
{
    if (isNumber(score))
    {
    if (score>=0.666) return keyh;
    else if (score>=0.333) return keym;
    else if (score>=0) return keyl;
    }
    return true;
}

function vis_by_link_score(score)
{
    if (isNumber(score))
    {
    if (score>=0.666) return key3;
    else if (score>=0.333) return key2;
    else if (score>=0) return key1;
}
    return true;
}

function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

最佳答案

搜索的问题是，当您在 onclick 前面附加一个点时，该函数没有被调用:

你正在做

<button type="button" .onclick="searchNode()">Search</button>

                      ^
                      |____ this is incorrect no need for a dot here.

这是屏幕截图:http://www.clipular.com/c/5115163935506432.png?k=HwZkU1_RriBsPlAfjsZWNzGcBSY

工作代码here

关于javascript - 使用 jQuery 的 D3.js 图的节点搜索栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37959231/

文章推荐： html - NSXMLDocumentTidyHTML 没有整理一些 XHTML 验证错误

文章推荐： c++ - 为什么 c++ 在以下情况下生成构造函数？

文章推荐： c++ - C++ 中的 this->data 和 (*this).data 有什么区别

文章推荐： html - 互联网浏览器 : Broken Underlines

检查用户输入的字符串在 C 中的格式为 "%d/%d/%d/%d/%d"
关闭。这个问题需要debugging details .它目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and th
java - 使用此表单获取号码\d\s\d\d\s\d
我试图用这种形式简单地获取数字 28 integer+space+integer+integer+space+integer我试过这个正则表达式 \\s\\d\\d\\s 但我得到了两个数字11 和
d - D 语言是否完全依赖于 D 运行时？
最近一直在学习D语言。我一直对运行时感到困惑。从我能收集到的关于它的信息中，(这不是很多)我知道它是一种有助于 D 的一些特性的运行时。像垃圾收集一样，它与您自己的程序一起运行。但是既然 D 是编译
java - 这两种语法\\d\\d\\d 和\\d{3} 在所有环境中都一样吗？
想问一下这两个正则表达式有区别吗？ \d\d\d 与 \d{3} 我已经在我的本地机器上使用 Java 和 Windows 操作系统对此进行了测试，两者都工作正常并且结果相同。但是，当在 linux
go - 为什么我不能执行 fmt.Sprintf ("%d.%d.%d.%d"，一个...)？
我正在学习 Go，而且我坚持使用 Go 之旅(exercise-stringer.go:https://tour.golang.org/methods/7)。这是一些代码: type IPAddr
java - Java中的正则表达式: Pattern.编译( "J.*\\d[0-35-9]-\\d\\d-\\d\\d")
我在Java正则表达式中发现了一段令我困惑的代码: Pattern.compile( "J.*\\d[0-35-9]-\\d\\d-\\d\\d" ); 要编译的字符串是: String string
ruby - gsub(/(\d{4})\/(\d\d)\/(\d\d)\/(.*)/, '\1-\2-\3-\4' ) 是什么意思？
我在 ruby 代码上偶然发现了这个。我知道\d{4})\/(\d\d)\/(\d\d)\/(.*)/是什么意思，但是\1-\2-\3-\4 是什么意思？最佳答案 \1-\2-\3-\4 是 b
d - 如何在没有 D 运行时编译 D 应用程序？
我一直在努力解决这个问题，这让我很恼火。我了解 D 运行时库。它是什么，它做什么。我也明白你可以在没有它的情况下编译 D 应用程序。就像 XoMB 所做的那样。好吧，XoMB 定义了自己的运行时，但是
Java算法到 "multiply"两个列表列表((A),(B))*((C,C),(D,D))==((A,C,C),(A,D,D), (B,C,C),(B,D,D))
我有两个列表列表，子列表代表路径。我想找到所有路径。 List> pathList1 List> pathList2 当然是天真的解决方案: List> result = new ArrayList>
java - 如何清理和打印\d{3}\d{3}\d{2}\d{2}格式的数字
我需要使用 Regex 格式化一个字符串，该字符串包含数字、字母 a-z 和 A-Z，同时还包含破折号和空格。从用户输入我有02-219 8 53 24 输出应该是022 198 53 24 我正在
d - D 中的表达式模板
目标是达到与this C++ example相同的效果: 避免创建临时文件。我曾尝试将 C++ 示例翻译为 D，但没有成功。我也尝试过不同的方法。 import std.datetime : benc
d - D 中的完美转发？
tl;dr:你好吗perfect forwarding在 D？该链接有一个很好的解释，但例如，假设我有这个方法: void foo(T)(in int a, out int b, ref int c
d - D 中的抽象自动函数
有什么方法可以在 D 中使用abstract auto 函数吗？如果我声明一个类如下: class MyClass { abstract auto foo(); } 我收到以下错误: mai
d - D 中的切片交集
有没有人为内存中重叠的数组切片实现交集？算法在没有重叠时返回 []。当 pretty-print (使用重叠缩进)内存中重叠的数组切片时，我想要这个。最佳答案如果您确定它们是数组，那么只需取 p
d - D 中循环索引变量的默认类型是什么？
我已经开始学习 D，但我在使用 Andrei Alexandrescu 所著的 The D Programming Language 一书中提供的示例时遇到了一些麻烦。由于 int 和 ulong 类
d - D 中唯一的不可变类
如何创建一个不可变的类？我的目标是创建一个实例始终不可变的类。现在我只是用不可变的方法和构造函数创建了一个“可变”类。我将其称为 mData，m 表示可变。然后我创建一个别名 alias immut
d - D 中的扩展函数
不久前我买了《The D Programming Language》。好书，很有教育意义。但是，我在尝试编译书中列出的语言功能时遇到了麻烦:扩展函数。在这本书中，Andrei 写了任何可以像这样调用
d - D 中的无限数据结构
我在 D http://www.digitalmars.com/d/2.0/lazy-evaluation.html 中找到了函数参数的惰性求值示例我想知道如何在 D 中实现可能的无限数据结构，就像
c - printf ("%d %d %d\n",++a, a++,a) 输出
这个问题在这里已经有了答案: 12 年前关闭。 Possible Duplicate: Could anyone explain these undefined behaviors (i = i++
d - D:查找具有特定属性的所有功能
当前是否可以跨模块扫描/查询/迭代具有某些属性的所有函数（或类）？例如： source/packageA/something.d: @sillyWalk(10) void doSomething()

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 使用 jQuery 的 D3.js 图的节点搜索栏