每个父子对在D3层次结构Typescript中具有相同的颜色

Question

我试图使用一个很好的例子"D3可折叠力布局"；从这里。我修改了输入数据如下

const data = {
"name": "directory",
"children": [
{"name": "1st file", 
"children": [{"name": "1f 1st function", "group": 1},  
{"name": "1f 2nd function", "group": 1},
{"name": "1f 3rd function", "group": 1},
{"name": "1f 4th function", "group": 1}], "group": 1,},
{"name": "2nd file", "children": [
{"name": "2f 1st function", "group": 2},
{"name": "2f 2nd function", "group": 2}], "group": 2},
{"name": "3rd file", "children": [
{"name": "3f 1st function", "group": 3}
], "group": 3},
{"name": "4th file", "children": [
{"name": "4f 1st function", "group": 4},
{"name": "4f 2nd function", "group": 4},
{"name": "4f 3rd function", "group": 4}
], "group": 4}
],
"group": 0
}

我希望基于组值的所有父子节点都具有相同的颜色。例如：所有"；组：1〃；将具有红色；组：2〃；绿色等等。有人能帮我弄清楚吗？谢谢你抽出时间。

Answer 1

您只需要一个序数。例如：

const colorScale = d3.scaleOrdinal()
.domain(d3.range(5))
.range(d3.schemeDark2);

这里我使用一个名为d3.schemeDark2的颜色数组，根据您想要的颜色进行更改。对于域，由于您的group是数字，所以我使用d3.range。

然后，画圆圈：

.style('fill', function(d){
return colorScale(d.data.group)
})

这是包含您的数据和这些更改的代码：

const data = {
"name": "directory",
"children": [{
"name": "1st file",
"children": [{
"name": "1f 1st function",
"group": 1
},
{
"name": "1f 2nd function",
"group": 1
},
{
"name": "1f 3rd function",
"group": 1
},
{
"name": "1f 4th function",
"group": 1
}
],
"group": 1,
},
{
"name": "2nd file",
"children": [{
"name": "2f 1st function",
"group": 2
},
{
"name": "2f 2nd function",
"group": 2
}
],
"group": 2
},
{
"name": "3rd file",
"children": [{
"name": "3f 1st function",
"group": 3
}],
"group": 3
},
{
"name": "4th file",
"children": [{
"name": "4f 1st function",
"group": 4
},
{
"name": "4f 2nd function",
"group": 4
},
{
"name": "4f 3rd function",
"group": 4
}
],
"group": 4
}
],
"group": 0
};
const colorScale = d3.scaleOrdinal()
.domain(d3.range(5))
.range(d3.schemeDark2);
const width = 500,
height = 400;
let i = 0;
const root = d3.hierarchy(data);
const transform = d3.zoomIdentity;
let node, link;
const svg = d3.select('body').append('svg')
.call(d3.zoom().scaleExtent([1 / 2, 8]).on('zoom', zoomed))
.append('g')
.attr('transform', 'translate(40,0)');
const simulation = d3.forceSimulation()
.force('link', d3.forceLink().id(function(d) {
return d.id;
}))
.force('charge', d3.forceManyBody().strength(-15).distanceMax(300))
.force('center', d3.forceCenter(width / 2, height / 4))
.on('tick', ticked)
function update() {
const nodes = flatten(root)
const links = root.links()
link = svg
.selectAll('.link')
.data(links, function(d) {
return d.target.id
})
link.exit().remove()
const linkEnter = link
.enter()
.append('line')
.attr('class', 'link')
.style('stroke', '#000')
.style('opacity', '0.2')
.style('stroke-width', 2)
link = linkEnter.merge(link)
node = svg
.selectAll('.node')
.data(nodes, function(d) {
return d.id
})
node.exit().remove()
const nodeEnter = node
.enter()
.append('g')
.attr('class', 'node')
.attr('stroke', '#666')
.attr('stroke-width', 2)
.style('fill', function(d) {
return colorScale(d.data.group)
})
.style('opacity', 1)
.on('click', clicked)
.call(d3.drag()
.on('start', dragstarted)
.on('drag', dragged)
.on('end', dragended))
nodeEnter.append('circle')
.attr("r", function(d) {
return Math.sqrt(d.data.size) / 10 || 4.5;
})
.style('text-anchor', function(d) {
return d.children ? 'end' : 'start';
})
.text(function(d) {
return d.data.name
})
node = nodeEnter.merge(node)
simulation.nodes(nodes)
simulation.force('link').links(links)
}
function sizeContain(num) {
num = num > 1000 ? num / 1000 : num / 100
if (num < 4) num = 4
return num
}
function color(d) {
return d._children ? "#51A1DC" // collapsed package
:
d.children ? "#51A1DC" // expanded package
:
"#F94B4C"; // leaf node
}
function radius(d) {
return d._children ? 8 :
d.children ? 8 :
4
}
function ticked() {
link
.attr('x1', function(d) {
return d.source.x;
})
.attr('y1', function(d) {
return d.source.y;
})
.attr('x2', function(d) {
return d.target.x;
})
.attr('y2', function(d) {
return d.target.y;
})
node
.attr('transform', function(d) {
return `translate(${d.x}, ${d.y})`
})
}
function clicked(d) {
if (!d3.event.defaultPrevented) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update()
}
}
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
}
function flatten(root) {
const nodes = []
function recurse(node) {
if (node.children) node.children.forEach(recurse)
if (!node.id) node.id = ++i;
else ++i;
nodes.push(node)
}
recurse(root)
return nodes
}
function zoomed() {
svg.attr('transform', d3.event.transform)
}
update()

body {
background-color: #E6E6E6;
}
svg {
width: 100vw;
height: 100vh;
}
.node {
pointer-events: all;
cursor: pointer;
z-index: 1000;
}
.node text {
font: 8px sans-serif;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>