что такое d.source? [Документация ссылается сама на себя] - PullRequest
Новая
       9

что такое d.source? [Документация ссылается сама на себя]

0 голосов
/ 01 апреля 2020

Интересно, что делает d.source и на какой источник он ссылается.

В документации API d3 объясняется, указан ли источник ...

link.source ( [source]) Source Если указан источник, устанавливает метод доступа источника к указанной функции и возвращает этот генератор ссылок. Если источник не указан, возвращает текущий метод доступа к источнику, который по умолчанию:

function source (d) {return d.source; }

даже не говорит мне, что такое «источник». Код, с которым я столкнулся 'source', выглядит следующим образом. 

function showLinkArrayElements(data, title) {
  d3.select('#content')
    .append('div')
    .html('<span>' + title + '</span>: ' + data.map(function(d) {return d.source.data.name + ' -> ' + d.target.data.name;}).join(', '))
}

Может ли кто-нибудь дать мне общий обзор источника и d.source / d.target, о котором идет речь в этом коде?

Спасибо

Весь код ниже. 

<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>Hierarchy examples</title>
</head>

<style>
body {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 14px;
  color: #333;
}

div {
  margin: 20px;
}

div span {
  font-weight: bold;
}

</style>

<body>
  <div id="content"></div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
  <script>
var data = {
  "name": "A1",
  "children": [
    {
      "name": "B1",
      "children": [
        {
          "name": "C1",
          "value": 100
        },
        {
          "name": "C2",
          "value": 300
        },
        {
          "name": "C3",
          "value": 200
        }
      ]
    },
    {
      "name": "B2",
      "value": 200
    }
  ]
};

function showArrayElements(data, title) {
  d3.select('#content')
    .append('div')
    .html('<span>' + title + '</span>: ' + data.map(function(d) {return d.data.name;}).join(', '))
}

function showLinkArrayElements(data, title) {
  d3.select('#content')
    .append('div')
    .html('<span>' + title + '</span>: ' + data.map(function(d) {return d.source.data.name + ' -> ' + d.target.data.name;}).join(', '))
}

var root = d3.hierarchy(data)

var ancestors = root.children[0].children[1].ancestors()
var descendants = root.descendants()
var leaves = root.leaves()
var path = root.path(root.children[0].children[1])
var links = root.links()

showArrayElements(ancestors, "root.children[0].children[1].ancestors()")
showArrayElements(descendants, "root.descendants()")
showArrayElements(leaves, "root.leaves()")
showArrayElements(path, "root.path(root.children[0].children[1])")
showLinkArrayElements(links, "root.links()")



  </script>
</body>
</html>

1 Ответ

1 голос
/ 01 апреля 2020

d.source связан с переменной данных при сопоставлении данных (поэтому источник в основном является свойством объекта связи d3). Проверьте ссылку для метода сопоставления массива .

node.links () -> Возвращает массив ссылок для этого узла, где каждая ссылка является объектом, который определяет свойства источника и цели. Источником каждой ссылки является родительский узел, а целью является дочерний узел.

...