Создание силового макета в библиотеке визуализации D3.js

Я работаю над проектом, который визуализирует ссылки между книгами. Стоит отметить, что я новичок в Javascript. Итак, я не смог далеко уйти, прочитав справочник API D3.js. Я использовал этот пример кода, который отлично работает.

Структура моего файла CSV выглядит следующим образом:

source,target
"book 1","book 2"
"book 1","book 3"

и т.п.

Источник и цель связаны ссылкой. Это точки для макета:

  1. Создайте два разных круга соответственно для исходного и целевого узла.

  2. Установите определенный цвет для исходного и целевого узла.

  3. Круги должны быть помечены информацией о книге, например, исходный узел помечен как «книга 1», а целевой узел помечен как «книга 2».

  4. Если между целями есть связь, то сделайте эту конкретную ссылку шире, чем другие ссылки от источника к цели.

Надеюсь, вы поможете мне, создав эти точки.

Заранее спасибо.

С уважением Эней


d3.js force-layout
person user1514509    schedule 10.07.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

d3.js гораздо лучше работает с файлами данных json, чем с файлами csv, поэтому я бы рекомендовал каким-то образом перенести ваши данные csv в формат json. Недавно я закодировал что-то похожее на это, и мои узлы и ссылки хранились в файле json в виде словаря, отформатированного как такового:

{ 
'links': [{'source': 1, 'target': 2, 'value': 0.3}, {...}, ...],
'nodes': [{'name': 'something', 'size': 2}, {...}, ...]
}

Это позволяет вам инициализировать ваши узлы и ссылки следующим образом (после запуска представления):

d3.json("data/nodesandlinks.json", function(json) {
var force = self.force = d3.layout.force()
    .nodes(json.nodes)
    .links(json.links)
    .linkDistance(function(d) { return d.value; })
    .linkStrength(function(d) { return d.value; })
    .size([width, height])
    .start();

var link = vis.selectAll("line.link")
    .data(json.links)
    .enter().append("svg:line")
    .attr("class", "link")
    .attr("source", function(d) { return d.source; })
    .attr("target", function(d) { return d.target; })
    .style("stroke-width", function(d) { return d.value; });

var node = vis.selectAll("g.node")
    .data(json.nodes)
    .enter().append("svg:g")
    .attr("class", "node")
    .attr("name", function(d) { return d.name; })
    .call(force.drag);

Надеюсь, это помогло!

person Sherwin Wu    schedule 10.07.2012
comment
Вы можете использовать сервер json или использовать d3 для преобразования csv в json. d3 имеет несколько отличных инструментов для преобразования csv в json. Эти два примера могут помочь: строка csv в json — gist.github.com/3053667 файл csv в json - gist.github.com/3053705 Затем эта страница для дальнейших манипуляций с массивами: github.com/mbostock/d3/wiki/Arrays - person PhoebeB; 11.07.2012