Почему фильтр сброса не работает в форсированном графе d3 js? - PullRequest
Новая
       21

Почему фильтр сброса не работает в форсированном графе d3 js?

0 голосов
/ 30 января 2020

Я пытаюсь заново нарисовать график направленной силы и вернуть его в исходное состояние, когда пользователь нажимает кнопку «Сбросить фильтр».

Но он работает не так, как ожидалось. Пожалуйста, обратитесь к jsfiddle ниже.

JSFiddle Link: Working Fiddle 

var filter = document.querySelector('#filter');
filter.addEventListener('change', function(event) {
d3.select("svg").remove();
  svg = d3.select("body").append("svg").attr("width","960").attr("height", "600");
  filterData(event.target.value);
})

 var resetFilter = document.querySelector('#reset');
resetFilter.addEventListener('click', function(event) {
  d3.select("svg").remove();
  svg = d3.select("body").append("svg").attr("width","960").attr("height", "600");
  graph = Object.assign({}, store);
  drawGraph(graph);
}) 

function filterData(id) {
    g.html('');
    graph = Object.assign({}, store);
    graph.nodes = [];
    graph.links = [];
    dummyStore = [id];
    store.links.forEach(function(link) {
            if(link.source.id === id) {
                graph.links.push(link);
                dummyStore.push(link.target.id);
            } else if (link.target.id === id) {
                graph.links.push(link);
                dummyStore.push(link.source.id)
            }
        });
        store.nodes.forEach(function(node) {
            if (dummyStore.includes(node.id)) {
                graph.nodes.push(node);
            }
        })
    drawGraph();
    }

Может кто-нибудь, пожалуйста, дайте мне знать, чего здесь не хватает?

1 Ответ

1 голос
/ 31 января 2020

В настоящее время вы каждый раз воссоздаете симуляцию и также каждый раз воссоздаете визуализацию: вместо того, чтобы выполнять цикл ввода / обновления / выхода с приходом и уходом узлов, вы стираете весь лист, удаляя все из SVG.

Теперь мы можем добавить цикл ввода / обновления / выхода, когда происходит фильтрация, но если нам нужно только скрыть отфильтрованные ссылки и узлы, мы можем просто скрыть их вместо их удаления. Я пояснил, что этот подход может быть удовлетворительным в комментариях, поскольку он значительно облегчает задачу.

Мы можем установить непрозрачность на 0 и указатели на события none для узлов и ссылок, которые были отфильтрованы, и сбросьте эти значения на 1 и all для ссылок и узлов, которые должны быть показаны.

Максимально используя ваш код, мы можем получить что-то вроде: 

// Re-apply the filter each time the input changes:    
d3.select("input").on("keyup", function() {
  // We want to know if we have a value of ""
  var value = this.value.length ? this.value : undefined;

  nodeElements.each(function(d) {
    d.show = false; // by default don't show if a filter is applied.
  })

  // Go through each datum (d.target and d.source) and
  // set a flag to show a node if it is connected (or is) included in the filter
  // also show the link or hide it as needed: 
  linkElements.each(function(d) {
    if(value && d.source.id.indexOf(value) == -1 && d.target.id.indexOf(value) == -1) {
      d3.select(this).attr("opacity",0);
    }
    else {
      d.source.show = d.target.show = true;
      d3.select(this).attr("opacity",1);
    }
  })

  // Now just hide/show text and circles as appropriate.
  nodeElements.attr("opacity",function(d) { return d.show ? 1 : 0 });
  textElements.attr("opacity",function(d) { return d.show ? 1 : 0 });

})

Я не устанавливал события указателя здесь для краткости, было бы проще использовать класс для одновременной установки событий прозрачности и указателя. Фильтр также чувствителен к заглавным буквам.

Поскольку данные для каждой пары узлов и текста одинаковы (и указаны в ссылочных данных), нам не нужно обновлять данные для каждого отдельно.

На скрытые узлы продолжают действовать силы, действующие на них один: они продолжают позиционироваться на заднем плане каждый тик. Если мы удалим элементы SVG, но не переопределим симуляцию, симуляция будет по-прежнему рассчитывать их положение на каждом тике. Если нам не нужна ни одна из этих вещей, нам нужен совершенно другой подход.

Вот небольшой пример в виде фрагмента: 

var graph = {
'nodes':[
{'id':'Menu','group':0},
{'id':'Item1','group':1},
{'id':'Item2','group':1},
{'id':'Item3','group':1},
{'id':'Item4','group':1},
{'id':'Item5','group':1},
{'id':'SubItem1_Item1','group':2},
{'id':'SubItem2_Item1','group':2}],
'links':[

{'source':'Menu','target':'Item1','value':1,'type':'A'},
{'source':'Menu','target':'Item2','value':8,'type':'A'},
{'source':'Menu','target':'Item3','value':10,'type':'A'},
{'source':'Menu','target':'Item3','value':1,'type':'A'},
{'source':'Menu','target':'Item4','value':1,'type':'A'},
{'source':'Menu','target':'Item5','value':1,'type':'A'},

/* Item1 is linked to SubItems */
{'source':'Item1','target':'SubItem1_Item1','value':2,'type':'A'},
{'source':'Item1','target':'SubItem2_Item1','value':1,'type':'A'},

/* Interconnected Items */
{'source':'Item5','target':'Item4','value':2,'type':'A'},
{'source':'Item2','target':'Item3','value':1,'type':'A'},
]};


var width = 500;
var height= 300;
var color = d3.scaleOrdinal(d3.schemeCategory10);

var svg = d3.select("body").append("svg")
  .attr("width",width)
  .attr("height",height);
  
var grads = svg.append("defs").selectAll("radialGradient")
    .data(graph.nodes)
    .enter()
    .append("radialGradient")
    .attr("gradientUnits", "objectBoundingBox")
    .attr("cx", 0)
    .attr("fill", function(d) { return color(d.id); })
    .attr("cy", 0)
    .attr("r", "100%")
    .attr("id", function(d, i) { return "grad" + i; });
 
   grads.append("stop")
    .attr("offset", "0%")
    .style("stop-color", "white");
 
   grads.append("stop")
    .attr("offset", "100%")
    .style("stop-color",  function(d) { return color(d.id); });    



var simulation = d3.forceSimulation()
  .force("link", d3.forceLink().distance(200).id(function(d) {
    return d.id;
  }))
  .force("charge", d3.forceManyBody().strength(-1000))
  .force("center", d3.forceCenter(width / 2, height / 2));
  
var g = svg.append("g")
  .attr("class", "everything");
  
var linkElements = g.append("g")
  .attr("class", "links")
  .selectAll("line")
  .data(graph.links)
  .enter().append("line")
  .style("stroke-width",5.5)
  .style("stroke", "grey")
  

var nodeElements =  g.append("g")
  .attr("class", "nodes")
  .selectAll("circle")
  .data(graph.nodes)
  .enter().append("circle")
  .attr("r", 60)
  .attr("stroke", "#fff")
  .attr('stroke-width', 21)
  .attr("id", function(d) { return d.id })
     .attr('fill', function(d, i) { return 'url(#grad' + i + ')'; })
     .on('contextmenu', function(d){ 
        d3.event.preventDefault();
        menu(d3.mouse(svg.node())[0], d3.mouse(svg.node())[1]);
    })
      .on('mouseover', selectNode)
      .on('mouseout', releaseNode)
  .call(d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged)
    .on("end", dragended));
      
var textElements = g.append("g")    // use g.append instead of svg.append to enable zoom
  .attr("class", "texts")
  .selectAll("text")
  .data(graph.nodes)
  .enter().append("text")
    .attr("text-anchor", "end")
  .text(function(node) {
    return node.id
  })
  .attr("font-size", 55)
  .attr("font-family", "sans-serif")
  .attr("fill", "black")
  .attr("style", "font-weight:bold;")
  .attr("dx", 30)
  .attr("dy", 80)


  
function ticked() {
  linkElements
    .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; });
  nodeElements
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .each(d => { d3.select('#t_' + d.id).attr('x', d.x + 10).attr('y', d.y + 3); });
    textElements
    .attr('x', function(d) {
      return d.x
    })
    .attr('y', function(d) {
      return d.y
    });
}

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

simulation.force("link")
  .links(graph.links);


function zoom_actions() {
  g.attr("transform", d3.event.transform)
}

function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

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

function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}

function selectNode(selectedNode) {
  var neighbors = getNeighbors(selectedNode)

  nodeElements
    .attr('fill', function(node) {
     	return getNodeColor(node,neighbors,selectedNode);
   })
  .transition().duration(500)
  .attr('r', function(node) {
     	return getNodeRadius(node,neighbors);
   });
     
   textElements.transition().duration(500).style('font-size', function(node) {
    return getTextColor(node, neighbors)
  })
}

function releaseNode() {
nodeElements.transition().duration(500)
   .attr('r', 60);
nodeElements.attr('fill', function(d, i) { return 'url(#grad' + i + ')'; })

   linkElements.style('stroke', 'grey');
}

function getNeighbors(node) {
  return graph.links.reduce(function(neighbors, link) {
    if (link.target.id === node.id) {
      neighbors.push(link.source.id)
    } else if (link.source.id === node.id) {
      neighbors.push(link.target.id)
    }
    return neighbors
  }, [node.id])
}

function getNodeColor(node, neighbors, selectedNode) {
  // If is neighbor
  if (Array.isArray(neighbors) && neighbors.indexOf(node.id) > -1) {
    return 'url(#grad' + selectedNode.index + ')'
    // return node.level === 1 ? '#9C4A9C' : 'rgba(251, 130, 30, 1)'
  }  else {
      return 'url(#grad' + node.index + ')'
  }
  //return node.level === 0 ? '#91007B' : '#D8ABD8'
}

function getNodeRadius(node, neighbors) {
  // If is neighbor
  if ( neighbors.indexOf(node.id) > -1) {
    return '100'
  } 
  else {
        return '60'
  }
}

function getTextColor(node, neighbors) {
  return Array.isArray(neighbors) && neighbors.indexOf(node.id) > -1 ? '40px' : '25px'
}

d3.select("input").on("keyup", function() {
  var value = this.value.length ? this.value : undefined;
  
  nodeElements.each(function(d) {
    d.show = false; // by default don't show if a filter is applied.
  })
  
  linkElements.each(function(d) {
    if(value && d.source.id.indexOf(value) == -1 && d.target.id.indexOf(value) == -1) {
      d3.select(this).attr("opacity",0);
    }
    else {
      d.source.show = d.target.show = true;
      d3.select(this).attr("opacity",1);
    }
  })
  
  nodeElements.attr("opacity",function(d) { return d.show ? 1 : 0 });
  textElements.attr("opacity",function(d) { return d.show ? 1 : 0 });

})

d3.select("button").on("click", function() {
  d3.select("input").property("value","");
  g.selectAll("*").attr("opacity",1);
})
<script src="https://d3js.org/d3.v4.min.js"></script>
Filter: <input type="text" name="filter" id="filter"/>
<button id = 'reset'>Reset Filter</button><br />

А вот и скрипка .

...