D3 번들 레이아웃 검색 기능

저는 멍청한데 다이어그램 검색 방법을 구현하려고합니다.D3 번들 레이아웃 검색 기능

그림은 화음도 주로 여기에서 적응했다 :

http://bl.ocks.org/mbostock/1044242

enter image description here

그리고 검색 기능 여기에서 찍은 :

http://mbostock.github.io/protovis/ex/treemap.html

내 문제는 그것이 내 파일을 읽을 때 텍스트를 다음과 같이 해석한다는 것입니다 : [object SVGTextElement] 그리고 내 검색에 대한 유일한 히트는 [object SVGTextElement]를 검색하는 경우입니다.

이 내 전체 코드입니다 :

<html> 
    <head> 
    <title>I'm Cool</title> 
    <link rel="stylesheet" type="text/css" href="ex.css?3.2"/> 
    <script type="text/javascript" src="../protovis-r3.2.js"></script> 
    <script type="text/javascript" src="bla3.json"></script> 
    <style type="text/css"> 

.node { 
    font: 300 11px "Helvetica Neue", Helvetica, Arial, sans-serif; 
    fill: #bbb; 
} 

.node:hover { 
    fill: #000; 
} 

.link { 
    stroke: steelblue; 
    stroke-opacity: 0.4; 
    fill: none; 
    pointer-events: none; 
} 

.node:hover, 
.node--source, 
.node--target { 
    font-weight: 700; 
} 

.node--source { 
    fill: #2ca02c; 
} 

.node--target { 
    fill: #d62728; 
} 


.link--source, 
.link--target { 
    stroke-opacity: 1; 
    stroke-width: 2px; 
} 

.link--source { 
    stroke: #d62728; 
} 

.link--target { 
    stroke: #2ca02c; 
} 
#fig { 
    width: 860px; 
} 

#footer { 
    font: 24pt helvetica neue; 
    color: #666; 
} 

input { 
    font: 24pt helvetica neue; 
    background: none; 
    border: none; 
    outline: 0; 
} 

#title { 
    float: right; 
    text-align: right; 
} 
</style> 
<body><div id="center"><div id="fig"> 
    <div id="title"></div> 
<script src="http://d3js.org/d3.v3.min.js"></script> 
<script> 

var diameter = 800, 
    radius = diameter/2, 
    innerRadius = radius - 160; 

var cluster = d3.layout.cluster() 
    .size([360, innerRadius]) 
    .sort(null) 
    .value(function(d) { return d.size; }); 

var bundle = d3.layout.bundle(); 

var line = d3.svg.line.radial() 
    .interpolate("bundle") 
    .tension(.85) 
    .radius(function(d) { return d.y; }) 
    .angle(function(d) { return d.x/180 * Math.PI; }); 

var svg = d3.select("body").append("svg") 
    .attr("width", diameter) 
    .attr("height", diameter) 
    .append("g") 
    .attr("transform", "translate(" + radius + "," + radius + ")"); 

var link = svg.append("g").selectAll(".link"), 
    node = svg.append("g").selectAll(".node"); 

d3.json("bla3.json", function(error, classes) { 
    var nodes = cluster.nodes(packageHierarchy(classes)), 
     links = packageImports(nodes); 

    link = link 
     .data(bundle(links)) 
    .enter().append("path") 
     .each(function(d) { d.source = d[0], d.target = d[d.length - 1]; }) 
     .attr("class", "link") 
     .attr("d", line); 

    node = node 
     .data(nodes.filter(function(n) { return !n.children; })) 
    .enter().append("text") 
     .attr("class", "node") 
     .attr("dx", function(d) { return d.x < 180 ? 12 : -12; }) 
     .attr("dy", ".31em") 
     .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")" + (d.x < 180 ? "" : "rotate(180)"); }) 
     .style("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; }) 
     .text(function(d) { return d.key; }) 
     .on("mouseover", mouseovered) 
     .on("mouseout", mouseouted); 
}); 

function mouseovered(d) { 
    node 
     .each(function(n) { n.target = n.source = false; }); 

    link 
     .classed("link--target", function(l) { if (l.target === d) return l.source.source = true; }) 
     .classed("link--source", function(l) { if (l.source === d) return l.target.target = true; }) 
    .filter(function(l) { return l.target === d || l.source === d; }) 
     .each(function() { this.parentNode.appendChild(this); }); 

    node 
     .classed("node--target", function(n) { return n.target; }) 
     .classed("node--source", function(n) { return n.source; }); 
} 

function mouseouted(d) { 
    link 
     .classed("link--target", false) 
     .classed("link--source", false); 

    node 
     .classed("node--target", false) 
     .classed("node--source", false); 
} 

d3.select(self.frameElement).style("height", diameter + "px"); 

// Lazily construct the package hierarchy from class names. 
function packageHierarchy(classes) { 
    var map = {}; 

    function find(name, data) { 
    var node = map[name], i; 
    if (!node) { 
     node = map[name] = data || {name: name, children: []}; 
     if (name.length) { 
     node.parent = find(name.substring(0, i = name.lastIndexOf("."))); 
     node.parent.children.push(node); 
     node.key = name.substring(i + 1); 
     } 
    } 
    return node; 
    } 

    classes.forEach(function(d) { 
    find(d.name, d); 
    }); 

    return map[""]; 
} 

// Return a list of imports for the given array of nodes. 
function packageImports(node) { 
    var map = {}, 
     imports = []; 

    // Compute a map from name to node. 
    node.forEach(function(d) { 
    map[d.name] = d; 
    }); 

    // For each import, construct a link from the source to target node. 
    node.forEach(function(d) { 
    if (d.imports) d.imports.forEach(function(i) { 
     imports.push({source: map[d.name], target: map[i]}); 
    }); 
    }); 

    return imports; 
} 
function title(d) { 
    return d.parentNode ? (title(d.parentNode) + "." + d.nodeName) : d.nodeName; 
} 

var re = "", 
    color = pv.Colors.category19().by(function(d) d.parentNode.nodeName) 
    node = pv.dom(bla3).root("bla3.json").node(); 

var vis = new pv.Panel() 
    .width(860) 
    .height(568); 


cluster.bundle.add(pv.Panel) 
    .fillStyle(function(d) color(d).alpha(title(d).match(re) ? 1 : .2)) 
    .strokeStyle("#fff") 
    .lineWidth(1) 
    .antialias(false); 

cluster.bundle.add(pv.Label) 
    .textStyle(function(d) pv.rgb(0, 0, 0, title(d).match(re) ? 1 : .2)); 

vis.render(); 

/** Counts the number of matching classes, updating the title element. */ 
function count() { 
    var classes = 0, bytes = 0, total = 0; 
    for (var i = 0; i < node.length; i++) { 
    var n = node[i]; 
    if(n.firstChild) continue; 
    total += n.nodeValue; 
    if (title(n).match(re)) { 
     classes++; 
     bytes += n.nodeValue; 
    } 
    } 
    var percent = bytes/total * 100; 
    document.getElementById("title").innerHTML 
     = classes + " classes found "+n; 
} 

/** Updates the visualization and count when a new query is entered. */ 
function update(query) { 
    if (query != re) { 
    re = new RegExp(query, "i"); 
    count(); 
    vis.render(); 
    } 
} 

count(); 
</script> 
<div id="footer"> 
     <label for="search">search: </label> 
     <input type="text" id="search" onkeyup="update(this.value)"> 
    </div> 
    </div></div></body> 
</html>

입력이 bla3.json이며, 다음과 같습니다

[{"name":"A.Patient Intake","imports":["E.Name","C.injury","E.DOB","E.Email","Progress","B.Obtain Brief Medical History","Perform Physical Exam","Perform Subjective Patient Evaluation"]}, 
{"name":"C.injury","imports":[]}, 
{"name":"E.Name","imports":[]}, 
{"name":"E.Email","imports":[]}, 
...

나는 모든 일을 두지 않았지만, 그건 문제가 안된다. ..

나의 목적은 물론 "환자의 섭취"와 같이 입력 할 수있는 검색 기능을 가지고 있으며 해당 코드 (또는 이름)를 강조 표시합니다.

enter image description here

어떻게해야할까요?

출처

2014-04-04 FairyDuster

나는 현재 당신이하고있는 것과 완전히 다른 방식으로 접근 할 것입니다. 쿼리 (DOM 요소가 아님)를 기반으로 데이터를 필터링 한 다음 D3의 데이터 일치를 사용하여 강조 표시 할 대상을 결정합니다. 코드에서 이것은 다음과 같이 보입니다.

function update(query) { 
    if (query != re) { 
    re = new RegExp(query, "i"); 

    var matching = classes.filter(function(d) { return d.name.match(re); }); 

    d3.selectAll("text.node").data(matching, function(d) { return d.name; }) 
     // do something with the nodes 

    // can be source or target in links, so we use a different method here 
    links.filter(function(d) { 
     var ret = false; 
     matching.forEach(function(e) { 
      ret = ret || e.name == d.source.name || e.name == d.target.name; 
     }); 
     return ret; 
     }) 
     // do something with the links 
    } 
}

출처

2014-04-05 11:47:33

감사! 이 함수 내에서 count() 메서드를 호출하려고했는데 작동하지 않습니다. 일치하는 노드를 강조 표시하고 얼마나 많은 조회가 있는지 계산하고 싶습니다. :) – FairyDuster

일치하는 클래스의 수는'matching.length'입니다. –

정말 고마워요! 나는 아직도 같은 문제가있다. 예를 들어'matching '을 출력하려고하면 실제 이름보다는'[object SVGTextElement]'만 얻습니다. 어떤 아이디어? – FairyDuster

D3 번들 레이아웃 검색 기능

답변

관련 문제