График силы D3 со стрелками и изогнутыми краями - укорачивайте связи, чтобы стрелки не перекрывали узлы - PullRequest
Новая
       19

График силы D3 со стрелками и изогнутыми краями - укорачивайте связи, чтобы стрелки не перекрывали узлы

0 голосов
/ 16 сентября 2018

Я только что прочитал этот пост - Ссылки и стрелки для завершения на границах узлов в D3 - однако я изо всех сил пытаюсь сопоставить его ответ (по его изогнутым ссылкам) с моим примером, который (я думаю, на самом деле ) использует более простой / другой изогнутый край для моих ссылок.

Я работал над воспроизводимым примером моей проблемы с отображением графика силы в течение последних 20-30 минут, однако по какой-то причине график не появляется (даже несмотря на то, что фрагмент кода не выдает ошибку). Это неизбежно набор кода (воссоздающий граф силы d3), хотя необходимо исправить только небольшой раздел. Во-первых, вот фрагмент кода: 

const svg = d3.select('#mySVG')
const nodesG = svg.select("g.nodes")

var graphs = {
  "nodes": [
    { "name": "Peter", "label": "Person", "id": 1 },
    { "name": "Michael", "label": "Person", "id": 2 },
    { "name": "Neo4j", "label": "Database", "id": 3 },
    { "name": "Graph Database", "label": "Database", "id": 4 }
  ],
  "links": [
    { "source": 1, "target": 2, "type": "KNOWS", "since": 2010 },
    { "source": 1, "target": 3, "type": "FOUNDED" },
    { "source": 2, "target": 3, "type": "WORKS_ON" },
    { "source": 3, "target": 4, "type": "IS_A" }
  ]
}

svg.append('defs').append('marker')
    .attr('id','arrowhead')
    .attr('viewBox','-0 -5 10 10')
    .attr('refX',13)
    .attr('refY',0)
    .attr('orient','auto')
    .attr('markerWidth',13)
    .attr('markerHeight',13)
    .attr('xoverflow','visible')
    .append('svg:path')
    .attr('d', 'M 0,-5 L 10 ,0 L 0,5')
    .attr('fill', '#999')
    .style('stroke','none');

const simulation = d3.forceSimulation()
  .force("link", d3.forceLink().id(d => d.id))
  .force("charge", d3.forceManyBody())
  .force("center", d3.forceCenter(100, 100));

let linksData = graphs.links.map(link => {
  var obj = link;
  obj.source = link.source;
  obj.target = link.target;
  return obj;
})

const links = svg.select("g.links")
  .selectAll("path")
  .data(linksData)
  .enter()
  .append("path")
  .attr('stroke', '#666666')
  .attr('fill', 'transparent')
  .attr("stroke-width", 2)
  .attr('marker-end', 'url(#arrowhead)')

const nodes = nodesG
  .selectAll("g")
  .data(graphs.nodes)
  .enter().append("g")
  .attr("cursor", "pointer")
  .call(d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged)
    .on("end", dragended));

const circles = nodes.append("circle")
  .attr("r", 12)
  .attr("fill", "000000")

nodes.append("title") 
  .text(function(d) { return d.id; });

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

simulation.force("link", d3.forceLink().links(linksData)
  .id((d,i) => d.id)
  .distance(150));
  
function ticked() {
  links.attr("d", function(d) {
    var dx = (d.target.x - d.source.x),
        dy = (d.target.y - d.source.y),
        dr = Math.sqrt(dx * dx + dy * dy);
    return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
  });

    nodes
        .attr("transform", d => `translate(${d.x}, ${d.y})`);
}

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;
}
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <script src="//d3js.org/d3.v4.min.js" type="text/javascript"></script>

</head>
<body>
<svg id="mySVG" width="500" height="500">
  <g class="links" />
	<g class="nodes" />
</svg>

Для начала, любая помощь в первую очередь с исправлением фрагмента кода, чтобы показать график будет принята с благодарностью.

Основная проблема, однако, заключается в том, что стрелки входят в узлы, тогда как я предпочел бы, чтобы не было перекрытия. У этого jsfiddle есть промежуток между стрелками и узлами, которые, я думаю, выглядят намного лучше - http://jsfiddle.net/yeQS2/89/ - хотя я думаю, что для моего примера я бы предпочел еще больший зазор между стрелкой и узлом.

Я считаю, что мне нужно обновить ticked() функцию: 

function ticked() {
  links.attr("d", function(d) {
    var dx = (d.target.x - d.source.x),
        dy = (d.target.y - d.source.y),
        dr = Math.sqrt(dx * dx + dy * dy);
    return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
  });

    nodes
        .attr("transform", d => `translate(${d.x}, ${d.y})`);
}

Я активно работаю над исправлением воспроизводимого примера. Я очень усердно работал над этим, и думаю, что это проблема, с которой многие люди столкнутся, когда попытаются создать эстетически привлекательный макет d3 force. Любая помощь с этим приветствуется!

Редактировать: спасибо тому, кто помогал работать графику - я вошел и сделал заливку прозрачной на ссылках, так что показываются только штрихи!

Edit2: не уверен, что это разрешено, но это для моего большого проекта, и я либо получу вознаграждение за этот пост через 2 дня, либо за вознаграждение победителя, если раньше, точно.

1 Ответ

0 голосов
/ 17 сентября 2018

Применяя ту же идею в моем ответе здесь .

Производит: 

const svg = d3.select('#mySVG')
const nodesG = svg.select("g.nodes")

var graphs = {
  "nodes": [{
      "name": "Peter",
      "label": "Person",
      "id": 1
    },
    {
      "name": "Michael",
      "label": "Person",
      "id": 2
    },
    {
      "name": "Neo4j",
      "label": "Database",
      "id": 3
    },
    {
      "name": "Graph Database",
      "label": "Database",
      "id": 4
    }
  ],
  "links": [{
      "source": 1,
      "target": 2,
      "type": "KNOWS",
      "since": 2010
    },
    {
      "source": 1,
      "target": 3,
      "type": "FOUNDED"
    },
    {
      "source": 2,
      "target": 3,
      "type": "WORKS_ON"
    },
    {
      "source": 3,
      "target": 4,
      "type": "IS_A"
    }
  ]
}

svg.append('defs').append('marker')
  .attr('id', 'arrowhead')
  .attr('viewBox', '-0 -5 10 10')
  .attr('refX', 0)
  .attr('refY', 0)
  .attr('orient', 'auto')
  .attr('markerWidth', 13)
  .attr('markerHeight', 13)
  .attr('xoverflow', 'visible')
  .append('svg:path')
  .attr('d', 'M 0,-5 L 10 ,0 L 0,5')
  .attr('fill', '#999')
  .style('stroke', 'none');

const simulation = d3.forceSimulation()
  .force("link", d3.forceLink().id(d => d.id))
  .force("charge", d3.forceManyBody())
  .force("center", d3.forceCenter(100, 100));

let linksData = graphs.links.map(link => {
  var obj = link;
  obj.source = link.source;
  obj.target = link.target;
  return obj;
})

const links = svg.select("g.links")
  .selectAll("path")
  .data(linksData)
  .enter()
  .append("path")
  .attr('stroke', '#666666')
  .attr('fill', 'transparent')
  .attr("stroke-width", 2)
  .attr('marker-end', 'url(#arrowhead)')

const nodes = nodesG
  .selectAll("g")
  .data(graphs.nodes)
  .enter().append("g")
  .attr("cursor", "pointer")
  .call(d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged)
    .on("end", dragended));

const circles = nodes.append("circle")
  .attr("r", 12)
  .attr("fill", "000000")

nodes.append("title")
  .text(function(d) {
    return d.id;
  });

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

simulation.force("link", d3.forceLink().links(linksData)
  .id((d, i) => d.id)
  .distance(150));

function ticked() {
  links.attr("d", function(d) {
    var dx = (d.target.x - d.source.x),
      dy = (d.target.y - d.source.y),
      dr = Math.sqrt(dx * dx + dy * dy);
    return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
  });

  // recalculate and back off the distance
  links.attr("d", function(d) {

    // length of current path
    var pl = this.getTotalLength(),
      // radius of circle plus backoff
      r = (12) + 30,
      // position close to where path intercepts circle
      m = this.getPointAtLength(pl - r);

    var dx = m.x - d.source.x,
      dy = m.y - d.source.y,
      dr = Math.sqrt(dx * dx + dy * dy);

    return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + m.x + "," + m.y;
  });

  nodes
    .attr("transform", d => `translate(${d.x}, ${d.y})`);
}

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;
}
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script src="//d3js.org/d3.v4.min.js" type="text/javascript"></script>

</head>

<body>
  <svg id="mySVG" width="500" height="500">
  <g class="links" />
	<g class="nodes" />
</svg>

Ключ такой: 

  // recalculate and back off the distance
  links.attr("d", function(d) {

    // length of current path
    var pl = this.getTotalLength(),
      // radius of circle plus backoff
      r = (12) + 30, //<-- 12 is your radius 30 is the "back-off" distance
      // position close to where path intercepts circle
      m = this.getPointAtLength(pl - r);

    var dx = m.x - d.source.x,
      dy = m.y - d.source.y,
      dr = Math.sqrt(dx * dx + dy * dy);

    return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + m.x + "," + m.y;
  });
...