Целью здесь является адаптация диаграммы радиального дерева d3 v3 к v5 с использованием новой функции .linkHorizontal()
, которая была представлена в более поздних версиях d3. Вот отрывок с жестко закодированными данными:
var margins = {top:20, bottom:300, left:30, right:100};
var height = 600;
var width = 900;
var totalWidth = width+margins.left+margins.right;
var totalHeight = height+margins.top+margins.bottom;
var svg = d3.select('body')
.append('svg')
.attr('width', totalWidth)
.attr('height', totalHeight);
var graphGroup = svg.append('g')
.attr('transform', "translate("+margins.left+","+margins.top+")");
var root = {"name" : "Araneae", "children" : [
{"name" : "Agelenidae", "children" : [
{"name" : "Hobo Spider"},
{"name" : "Giant House Spider"},
{"name" : "Domestic House Spider"},
{"name" : "Dust Spider"}
] },
{"name" : "Araneidae", "children" : [
{"name" : "Grass Spider"},
{"name" : "Cross Orb Weaver"},
{"name" : "Banded Garden Spider"},
{"name" : "Golden Orb Weaver Spider"},
{"name" : "Long-Jawed Orb Weaver Spider"}
] },
{"name" : "Ctenidae", "children" : [
{"name" : "Brazilian Wandering Spider"},
{"name" : "Fishing Spider"}
] },
{"name" : "Desidae", "children" : [
{"name" : "Black House Spider"},
{"name" : "Brown House Spider"},
{"name" : "Hollow Twig Spider"}
] },
{"name" : "Filistatidae", "children" : [
{"name" : "Southern House Spider"},
{"name" : "Arizona Black Hole Spider"}
] },
{"name" : "Lycosidae", "children" : [
{"name" : "Carolina Wolf Spider"},
{"name" : "Brown Wolf Spider"},
{"name" : "Texas Wolf Spider"}
] },
{"name" : "Pholcidae", "children": [
{"name" : "Cellar Spider"},
{"name" : "Yellow Sac Spider"},
{"name" : "Ground Spider"},
{"name" : "Banded Garden Spider"}
] },
{"name" : "Salticidae", "children": [
{"name" : "Bold Jumping Spider"},
{"name" : "Zebra Jumping Spider"},
{"name" : "Gray Wall Jumping Spider"}
] },
{"name" : "Sicariidae", "children": [
{"name" : "Brown Spider"},
{"name" : "Brown Recluse Spider"}
] },
{"name" : "Theraphosidae", "children": [
{"name" : "King Baboon Spider"},
{"name" : "Bird Eating Spider"},
{"name" : "Pinktoe Tarantula Spider"},
{"name" : "Indian Ornamental Tree Spider"}
] },
{"name" : "Theridiidae", "children": [
{"name" : "Black Widow Spider"},
{"name" : "Brown Widow Spider"},
{"name" : "Red Widow Spider"}
] }
]};
var diameter = 760;
var tree = d3.tree()
.size([360, diameter / 2 - 190])
.separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
var diagonal = function link(d) {
return "M" + d.source.y + "," + d.source.x
+ "C" + (d.source.y + d.target.y) / 2 + "," + d.source.x
+ " " + (d.source.y + d.target.y) / 2 + "," + d.target.x
+ " " + d.target.y + "," + d.target.x;
};
const treeRoot = d3.hierarchy(root)
d3.tree(treeRoot)
const nodes = treeRoot.descendants()
const links = treeRoot.links()
var link = graphGroup.selectAll(".link")
.data(links)
.enter().append("path")
.attr("class", "link")
.attr("d", diagonal);
var node = graphGroup.selectAll(".node")
.data(nodes)
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
node.append("circle")
.attr("r", 5);
node.append("text")
.attr("dy", ".31em")
.attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
.attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; })
.text(function(d) { return d.name; });
d3.select(self.frameElement).style("height", diameter - 150 + "px");
<script src="https://d3js.org/d3.v5.min.js"></script>
Это дает мне ошибку:
Ошибка: атрибут пути d: ожидаемое число, "Mundefined, undefin ..."
Оригинальная версия v3 здесь:
http://bl.ocks.org/nlinc1905/66ea5dd294ed28385b7f
Как вы видите, с версией v3 проблем нет, однако Я не могу заставить его работать для v5 - даже после внесения изменений согласно d3 js tree.nodes () не является функцией . А именно:
var tree = d3.tree()
.size([360, diameter / 2 - 190])
.separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
var diagonal = function link(d) {
return "M" + d.source.y + "," + d.source.x
+ "C" + (d.source.y + d.target.y) / 2 + "," + d.source.x
+ " " + (d.source.y + d.target.y) / 2 + "," + d.target.x
+ " " + d.target.y + "," + d.target.x;
};
const treeRoot = d3.hierarchy(root)
d3.tree(treeRoot)
const nodes = treeRoot.descendants()
const links = treeRoot.links()
Также пытался (за комментарии):
var treeRoot = d3.hierarchy(root);
treeRoot = d3.tree(treeRoot);
Вопрос
В чем проблема с синтаксисом радиального дерева v5 и как я могу его решить