Как мне отформатировать мой JSON и объяснить некоторые базовые нод-линки графа d3?

1

Я хочу представить свои данные из этого JSON как узловую ссылку, используя D3.js. Я новичок в JavaScript и D3.js. У меня есть 3 типа данных, и я хочу создать иерархию между этими тремя типами данных. Родители> Источник> Дети, я хочу разместить каждого родителя над источником и связать каждого родителя с источником, и каждый ребенок должен находиться под источником и связать их с исходным кодом:

script.js

var width = 960,
        height = 500;

// i don't really understand what this does 
// except the .linkDistance - gives the dimension of the link
var force = d3.layout.force()
    .size([width, height])
    .charge(-400)
    .linkDistance(40)
    .on("tick", tick);

// Drag the nodes
var drag = force.drag()
    .on("dragstart", dragstart);

//Appends the svg - the place where i draw all my items 
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

// Select all the links and nodes , from an array ? i don't really get it
var link = svg.selectAll(".link"),
    node = svg.selectAll(".node");

// The function where i take the data from the JSON
d3.json("graph.json", function(error, graph) {
  if (error) throw error;

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

  link = link.data(graph.links)
    .enter().append("line")
      .attr("class", "link");

  node = node.data(graph.nodes)
    .enter().append("circle")
      .attr("class", "node")
      .attr("r", 12)
      .on("dblclick", dblclick)
      .call(drag);
});


// Here is the function where i should asign the position of the nodes and the links
// This is the most problematic and i really don't understand it
function tick(){}

// The function to fix and to clear the fix from a node
function dblclick(d) {
  d3.select(this).classed("fixed", d.fixed = false);
}

function dragstart(d) {
  d3.select(this).classed("fixed", d.fixed = true);
}

Index.html

<!DOCTYPE html>
<html lang="en">

    <head>
    <link rel="stylesheet"  href="style.css">
        <meta charset="utf-8">
        <title>D3 Test</title>
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>    
        <script src="script.js"></script>
    </head>
</body>

style.css

.link {
    stroke: #777;
    stroke-width: 2px;
}
.nodes circle{
  cursor: move;
  fill: #ccc;
  stroke: #000;
  stroke-width: 1.5px;

}
.node.fixed {
  fill: #f00;
}

graph.json

 {
    "nodes":[
    {
        "id": "Source" , "group" :0
    },
    {
        "id":"Parent_1" , "group" : 1 
    },
    {
        "id": "Parent_2" , "group" :1
    },
    {
        "id": "Parent_3" , "group" :1
    },

    {
        "id":"Child_1" , "group":2
    },
    {
        "id":"Child_2" , "group":2
    },
    {
        "id":"Child_3" , "group":2}
    ],
    "links":[
    {
    "source":"Source","target":"Parent_1"
    },
    {
    "source":"Source","target":"Parent_2"
    },
    {
    "source":"Source","target":"Parent_3"
    },
    {
    "source":"Source","target":"Child_1"
    },
    {
    "source":"Source","target":"Child_2"
    },
    {
    "source":"Source","target":"Child_3"
    },

    ]



    }

Если у кого-то есть время и настроение объяснить мне, как отформатировать мой JSON, поэтому я могу использовать его более эффективно и объяснить мне, как создать граф узловых ссылок с помощью d3 шаг за шагом или дать мне демо-версию и объяснить каждый фрагмент кода я был бы очень благодарен. Если есть проблема относительно того, как я задал вопрос, или что-то неясно, скажите, я могу его отредактировать. Спасибо !

  • 1
    Это довольно большой вопрос и много работы, чтобы объяснить. Ваш Json выглядит хорошо для меня в том, что он правильно отформатирован и содержит ссылки (связывающие каждого потомка и родителя с «источником»). Вы, конечно, можете использовать силу, чтобы сгруппировать родителей / детей вместе в SVG. Вы читали dashingd3js.com и d3indepth.com/about . Если вы настроите gist / block, jsfiddle или plunkr, то вы можете проверить свой код в действии, и люди увидят, что не так.
  • 0
    Да, я просмотрел много учебников и объяснил код, но я все еще не понял, спасибо, хотя за ссылки я буду проверять бесплатные видео.
Теги:
d3.js
graph
force-layout

1 ответ

0
Лучший ответ

Хорошо, вкратце, сила помещает все ваши узлы в svg и дает им много атрибутов, некоторые связаны с данными, а некоторые - с поведением графика силы.

В общем, узлы отталкивают друг друга, но это поведение можно изменить, установив силу d3.forceManyBody.

Связи создадут силу между узлами, которые могут использоваться для объединения узлов вместе или удерживать их на заданном расстоянии друг от друга.

Как правило, сила будет тянуть все узлы к центру графика, но вы можете настроить их на привлечение в любом месте. В вашем случае вам нужна точка в верхнем центре (например, на 25% вниз по SVG), чтобы привлечь родительские узлы (группа 1) и центр точечного botton (75% вниз по SVG), чтобы привлечь дочерние узлы (группа 2). Вы можете установить исходный узел в центр;

var position = d3.forceSimulation(graph.nodes).force("charge", d3.forceManyBody()).force("x", d3.forceCenter(width / 2, height/ 2)).force("collide", d3.forceCollide(15 * R));
    nodes.each(function(d) {
        if (d.group == 0) {
            d.fx = wid / 2;//fix X value
            d.fy = wid / 2//fix Y value
        }
    });

если вы можете настроить jsfiddle или подобное и получить что-то работающее, я мог бы увидеть, где вы застряли (похоже, ваши заказы немного не создают ссылки до загрузки данных). Кроме того, вы загружаете d3 версию 3, по мере того, как вы начинаете, теперь вы можете переключиться на версию 4.

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

Поделиться
  • 0
    Хорошо, это довольно полезно, я пытаюсь переписать код и настроить jsfiddle так, как вам требуется, это может занять некоторое время, так что оставайтесь на месте. Еще раз спасибо !

Ещё вопросы

Сообщество Overcoder
Наверх
Меню