Intereting Posts
Новая строка на странице без причины Удаление ввода-заглушки на печатной версии html-страницы Chrome не может установить Cookie без сервера Регулярное выражение для парсинга гиперссылок и описаний Центрирование многострочных элементов с плавающей точкой Pure CSS многоуровневое раскрывающееся меню Упорядочение элементов набора элементов, таких как типичная табличная конструкция Горизонтальная прокрутка CSS как получить ImageUrl элемента управления asp изображения, чей образ установлен jquery на стороне клиента? Как захватить ключ сеанса, созданный из перенаправления URL-адресов Разница между «display: block; float: left ‘vs.’ display: inline-block; плыть налево’? как перемещать текст во входных данных с помощью js Есть ли способ отключить автозаполнение форм на веб-сайте? Скрыть конкретную загрузку div и затем показать div после щелчка Нижний колонтитул внизу страницы или содержимого, в зависимости от того, что меньше

D3js – Принудительный график – расширенное выделение узлов и ссылок для соседей, возможно ли это?

Мне удалось получить подсветку работы над моим графиком, ориентированным на силу, с помощью этого учебника от Майка Бостока . Теперь для дальнейшей процедуры в моей идее и потребностях моего графика я немного застрял, во-первых, потому что я все еще nooby о d3js, а во-вторых, я еще не нашел ничего подобного.

Чтобы выяснить, каковы мои намерения, вы можете увидеть текущий график с подсветкой по следующей ссылке: http://jsfiddle.net/2FwSY/

Это работает хорошо, но моя идея немного продвинута. Мне было интересно, можно ли настроить подсветку таким образом, чтобы при наведении на узел узел выделял ссылки этого узла на соседние узлы, соседние узлы, а также ссылки из соседних узлов на их соседние узлы.

Точно, на моем примере jsfiddle. Если вы наведете BNG , BNG , YHO , CEO и все links between them подсвечены. Проблема в том, что маленькие синие узлы, которые я использую как «соединение» между более крупными узлами, теперь моя подсветка «обрезается» на них, потому что они являются узлами на самом деле. Также мне кажется, что понадобится инструкция IF которая сообщит, является ли зависающий узел таким маленьким или большим, потому что я хочу, чтобы эта высокая концентрация на этом маленьком узле соединения работала так, как будто она работает сейчас.

Я не знаю, с чего начать, поэтому любое предложение или совет приветствуются …

полный скрипт выглядит так:

 var data = {"nodes":[ {"name":"YHO", "full_name":"Yahoo", "type":1, "slug": "www.yahoo.com", "entity":"company", "img_hrefD":"", "img_hrefL":""}, {"name":"GGL", "full_name":"Google", "type":2, "slug": "www.google.com", "entity":"company", "img_hrefD":"", "img_hrefL":""}, {"name":"BNG", "full_name":"Bing", "type":2, "slug": "www.bing.com", "entity":"company", "img_hrefD":"", "img_hrefL":""}, {"name":"YDX", "full_name":"Yandex", "type":2, "slug": "www.yandex.com", "entity":"company", "img_hrefD":"", "img_hrefL":""}, {"name":"Desc1", "type":4, "slug": "", "entity":"description"}, {"name":"Desc2", "type":4, "slug": "", "entity":"description"}, {"name":"Desc4", "type":4, "slug": "", "entity":"description"}, {"name":"CEO", "prefix":"Mr.", "fst_name":"Jim", "snd_name":"Bean", "type":3, "slug": "", "entity":"employee"}, {"name":"ATT", "prefix":"Ms.", "fst_name":"Jenna", "snd_name":"Jameson", "type":3, "slug": "", "entity":"employee"}, {"name":"CTO", "prefix":"Mr.", "fst_name":"Lucky", "snd_name":"Luke", "type":3, "slug": "", "entity":"employee"}, {"name":"CDO", "prefix":"Ms.", "fst_name":"Pamela", "snd_name":"Anderson", "type":3, "slug": "", "entity":"employee"}, {"name":"CEO", "prefix":"Mr.", "fst_name":"Nacho", "snd_name":"Vidal", "type":3, "slug": "", "entity":"employee"}, {"name":"Desc5", "type":4, "slug": "", "entity":"description"}, ], "links":[ {"source":0,"target":4,"value":1,"distance":5}, {"source":0,"target":5,"value":1,"distance":5}, {"source":0,"target":6,"value":1,"distance":5}, {"source":1,"target":4,"value":1,"distance":5}, {"source":2,"target":5,"value":1,"distance":5}, {"source":3,"target":6,"value":1,"distance":5}, {"source":7,"target":3,"value":10,"distance":6}, {"source":8,"target":3,"value":10,"distance":6}, {"source":9,"target":1,"value":10,"distance":6}, {"source":10,"target":1,"value":10,"distance":6}, {"source":11,"target":12,"value":10,"distance":6}, {"source":12,"target":2,"value":10,"distance":6}, ] } var w = 560, h = 500, radius = d3.scale.log().domain([0, 312000]).range(["10", "50"]); var vis = d3.select("body").append("svg:svg") .attr("width", w) .attr("height", h); //vis.append("defs").append("marker") //.attr("id", "arrowhead") //.attr("refX", 22 + 3) /*must be smarter way to calculate shift*/ //.attr("refY", 2) //.attr("markerWidth", 6) //.attr("markerHeight", 4) //.attr("orient", "auto") //.append("path") //.attr("d", "M 0,0 V 4 L6,2 Z"); //this is actual shape for arrowhead //d3.json(data, function(json) { var force = self.force = d3.layout.force() .nodes(data.nodes) .links(data.links) .linkDistance(function(d) { return (d.distance*10); }) //.friction(0.5) .charge(-250) .size([w, h]) .start(); var link = vis.selectAll("line.link") .data(data.links) .enter().append("svg:line") .attr("class", function (d) { return "link" + d.value +""; }) .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; }) .attr("marker-end", function(d) { if (d.value == 1) {return "url(#arrowhead)"} else { return " " } ;}); function openLink() { return function(d) { var url = ""; if(d.slug != "") { url = d.slug } //else if(d.type == 2) { //url = "clients/" + d.slug //} else if(d.type == 3) { //url = "agencies/" + d.slug //} window.open("//"+url) } } var node = vis.selectAll("g.node") .data(data.nodes) .enter().append("svg:g") .attr("class", "node") .call(force.drag); node.append("circle") .attr("class", function(d){ return "node type"+d.type}) .attr("r",function(d){if(d.entity == "description"){ return 6 } else { return 18 }}) //.on("mouseover", expandNode); //.style("fill", function(d) { return fill(d.type); }) node.append("text") .attr("class", function(d){ return "nodetext title_"+d.name }) .attr("dx", 0) .attr("dy", ".35em") .style("font-size","10px") .attr("text-anchor", "middle") .style("fill", "white") .text(function(d) { if (d.entity != "description"){return d.name} }); node.on("mouseover", function (d) { if (d.entity == "company"){ d3.select(this).select('text') .transition() .duration(300) .text(function(d){ return d.full_name; }) .style("font-size","15px") } else if(d.entity == "employee"){ var asdf = d3.select(this); asdf.select('text').remove(); asdf.append("text") .text(function(d){return d.prefix + ' ' + d.fst_name }) .attr("class","nodetext") .attr("dx", 0) .attr("dy", ".35em") .style("font-size","5px") .attr("text-anchor", "middle") .style("fill", "white") .transition() .duration(300) .style("font-size","12px"); asdf.append("text").text(function(d){return d.snd_name }) .attr("class","nodetext") .attr("transform","translate(0, 12)") .attr("dx", 0) .attr("dy", ".35em") .style("font-size","5px") .attr("text-anchor", "middle") .style("fill", "white") .transition() .duration(300) .style("font-size","12px"); } else { d3.select(this).select('text') .transition() .duration(300) .style("font-size","15px") } if (d.entity == "company") { d3.select(this).select('image') .attr("width", "90px") .attr("x", "-46px") .attr("y", "-36.5px") .attr("xlink:href", function (d) { return d.img_hrefL }); } if (d.entity == "company") { d3.select(this).select('circle') .transition() .duration(300) .attr("r",28) } else if (d.entity == "employee"){ d3.select(this).select('circle') .transition() .duration(300) .attr("r",32) } }) node.on("mouseout", function (d) { if (d.entity == "company") { d3.select(this).select('text') .transition() .duration(300) .text(function(d){return d.name;}) .style("font-size","10px") } else if(d.entity == "employee"){ /////////////////////////// // CHANGE /////////////////////////// d3.select(this).selectAll('text').remove(); //d3.select(this).select('text') d3.select(this).append('text') .text(function(d){return d.name;}) .style("font-size","14px") .attr("dx", 0) .attr("dy", ".35em") .attr("text-anchor", "middle") .style("fill", "white") .attr("class","nodetext") .transition() .duration(300) .style("font-size","10px") } else { d3.select(this).select('text') .transition() .duration(300) .style("font-size","10px") } if (d.entity == "company") { d3.select(this).select('image') .attr("width", "70px") .attr("x", "-36px") .attr("y", "-36px") .attr("xlink:href", function (d) { return d.img_hrefD }); } if (d.entity == "company" || d.entity == "employee") { d3.select(this).select('circle') .transition() .duration(300) .attr("r",18) } }); node.on("mouseover", fade(.4,"red")) .on("mouseout", fade(1)); var linkedByIndex = {}; data.links.forEach(function(d) { linkedByIndex[d.source.index + "," + d.target.index] = 1; }); function isConnected(a, b) { return linkedByIndex[a.index + "," + b.index] || linkedByIndex[b.index + "," + a.index] || a.index == b.index; } force.on("tick", function() { 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("transform", function(d) { return "translate(" + dx + "," + dy + ")"; }); }); function fade(opacity,color) { return function(d) { node.style("stroke-opacity", function(o) { thisOpacity = isConnected(d, o) ? 1 : opacity; this.setAttribute('fill-opacity', thisOpacity); return thisOpacity; }); link.style("stroke-opacity", function(o) { return o.source === d || o.target === d ? 1 : opacity; }) .style("stroke", function(o) { return o.source === d || o.target === d ? color : "#000" ; }); }; } //}); 

Чтобы определить ваши «специальные» узлы, вы можете добавить другой атрибут к данным, которые их идентифицируют. Затем вы можете проверить это в своей функции выделения и получить соседи второй степени, если это необходимо. Код будет выглядеть примерно так.

 function fade(opacity,color) { return function(d) { var connected = [d]; if(d.isAuxiliary) { node.each(function(o) { if(isConnected(d, o)) { connected.push(o); } }); } node.style("stroke-opacity", function(o) { thisOpacity = opacity; connected.forEach(function(e) { if(isConnected(e, o)) { thisOpacity = 1; } }); this.setAttribute('fill-opacity', thisOpacity); return thisOpacity; }); // similar for links } } 

Вы можете адаптировать этот код для произвольного уровня соседей.