我正在使用d3.js绘制一棵树，当我添加链接时，会在两侧绘制方向和阈值。
我添加这样的文本：
.text(function(d) {
return d.source.thresholds + ' ' + d.source.directions;
})
我怎样才能给这个.text添加限制，使它只在链接的左侧绘制，而不在两者中都绘制。如何设置限制，使其仅显示在左侧链接中。
例如<=12应仅绘制在A的左侧链接上，而不是绘制在两个链接上。
var treeData = [{
"name": "A",
"directions": "<=",
"thresholds": "12",
"children": [{
"name": "B",
"directions": "<=",
"thresholds": "12",
"children": [{
"name": "C",
"directions": "<=",
"thresholds": "4",
"children": [{
"name": "false"
},
{
"name": "true"
}
]
},
{
"name": "A",
"directions": "<=",
"thresholds": "12",
"children": [{
"name": "B",
"directions": "<=",
"thresholds": "2",
"children": [{
"name": "true"
},
{
"name": "false"
}
]
},
{
"name": "C",
"directions": "<=",
"thresholds": "5",
"children": [{
"name": "false"
},
{
"name": "true"
}
]
}
]
}
]
},
{
"name": "B",
"directions": "<=",
"thresholds": "15",
"children": [{
"name": "D",
"directions": "<=",
"thresholds": "18",
"children": [{
"name": "E",
"directions": "<=",
"thresholds": "2.5",
"children": [{
"name": "true"
},
{
"name": "false"
}
]
},
{
"name": "F",
"directions": "<=",
"thresholds": "4.8",
"children": [{
"name": "false"
},
{
"name": "true"
}
]
}
]
},
{
"name": "true"
}
]
}
]
}];
// ************** Generate the tree diagram *****************
var margin = {
top: 20,
right: 120,
bottom: 20,
left: 120
},
width = 960 - margin.right - margin.left,
height = 600 - margin.top - margin.bottom;
var i = 0;
var tree = d3.layout.tree()
.size([height, width]);
var diagonal = d3.svg.diagonal()
.projection(function(d) {
return [d.x, d.y];
});
var svg = d3.select("body").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
root = treeData[0];
update(root);
function update(source) {
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);
// Normalize for fixed-depth.
nodes.forEach(function(d) {
d.y = d.depth * 120;
});
// Declare the nodes…
var node = svg.selectAll("g.node")
.data(nodes, function(d) {
return d.id || (d.id = ++i);
});
// Enter the nodes.
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
nodeEnter.append("circle")
.attr("r", 10)
.style("fill", "#fff");
nodeEnter.append("text")
.attr("x", function(d) {
return d.children || d._children ? -13 : 13;
})
.attr("dy", ".35em")
.attr("text-anchor", function(d) {
return d.children || d._children ? "end" : "start";
})
.text(function(d) {
return d.name;
})
.style("fill-opacity", 1);
// Declare the links…
var link = svg.selectAll("path.link")
.data(links, function(d) {
return d.target.id;
});
// Enter the links.
link.enter().insert("path", "g")
.attr("class", "link")
.attr("d", diagonal);
// Add threshold and directions
link.enter().insert("text")
.attr("font-family", "Arial, Helvetica, sans-serif")
.attr("fill", "Black")
.style("font", "normal 12px Arial")
.attr("transform", function(d) {
return "translate(" +
((d.source.x + d.target.x) / 2) + "," +
((d.source.y + d.target.y) / 2) + ")";
})
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.text(function(d) {
return d.source.thresholds + ' ' + d.source.directions;
})
}.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 3px;
}
.node text {
font: 12px sans-serif;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 2px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>如果能为我解决这个问题提供任何帮助，我们将不胜感激。
您可以使用.filter()将选择减少到仅左侧节点。具体来说，要只选择左侧有链接的节点，可以使用
.filter(function(d) {
return d.target.x < d.source.x;
})
在树中，有nodes和links。节点定义一个打印圆，包括其位置(具有x和y坐标，从左上角开始计数(。链接包含对两个node对象(其源和目标(的引用。通过说d.target.x < d.source.x，我实际上是说，我只想查看其目标节点的x值低于(因此更靠近左侧(源节点的链路。
var treeData = [{
"name": "A",
"directions": "<=",
"thresholds": "12",
"children": [{
"name": "B",
"directions": "<=",
"thresholds": "12",
"children": [{
"name": "C",
"directions": "<=",
"thresholds": "4",
"children": [{
"name": "false"
},
{
"name": "true"
}
]
},
{
"name": "A",
"directions": "<=",
"thresholds": "12",
"children": [{
"name": "B",
"directions": "<=",
"thresholds": "2",
"children": [{
"name": "true"
},
{
"name": "false"
}
]
},
{
"name": "C",
"directions": "<=",
"thresholds": "5",
"children": [{
"name": "false"
},
{
"name": "true"
}
]
}
]
}
]
},
{
"name": "B",
"directions": "<=",
"thresholds": "15",
"children": [{
"name": "D",
"directions": "<=",
"thresholds": "18",
"children": [{
"name": "E",
"directions": "<=",
"thresholds": "2.5",
"children": [{
"name": "true"
},
{
"name": "false"
}
]
},
{
"name": "F",
"directions": "<=",
"thresholds": "4.8",
"children": [{
"name": "false"
},
{
"name": "true"
}
]
}
]
},
{
"name": "true"
}
]
}
]
}];
// ************** Generate the tree diagram *****************
var margin = {
top: 20,
right: 120,
bottom: 20,
left: 120
},
width = 960 - margin.right - margin.left,
height = 600 - margin.top - margin.bottom;
var i = 0;
var tree = d3.layout.tree()
.size([height, width]);
var diagonal = d3.svg.diagonal()
.projection(function(d) {
return [d.x, d.y];
});
var svg = d3.select("body").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
root = treeData[0];
update(root);
function update(source) {
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);
// Normalize for fixed-depth.
nodes.forEach(function(d) {
d.y = d.depth * 120;
});
// Declare the nodes…
var node = svg.selectAll("g.node")
.data(nodes, function(d) {
return d.id || (d.id = ++i);
});
// Enter the nodes.
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
nodeEnter.append("circle")
.attr("r", 10)
.style("fill", "#fff");
nodeEnter.append("text")
.attr("x", function(d) {
return d.children || d._children ? -13 : 13;
})
.attr("dy", ".35em")
.attr("text-anchor", function(d) {
return d.children || d._children ? "end" : "start";
})
.text(function(d) {
return d.name;
})
.style("fill-opacity", 1);
// Declare the links…
var link = svg.selectAll("path.link")
.data(links, function(d) {
return d.target.id;
});
// Enter the links.
link.enter().insert("path", "g")
.attr("class", "link")
.attr("d", diagonal);
// Add threshold and directions
link.enter()
.insert("text")
.filter(function(d) {
return d.target.x < d.source.x;
})
.attr("font-family", "Arial, Helvetica, sans-serif")
.attr("fill", "Black")
.style("font", "normal 12px Arial")
.attr("transform", function(d) {
return "translate(" +
((d.source.x + d.target.x) / 2) + "," +
((d.source.y + d.target.y) / 2) + ")";
})
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.text(function(d) {
return d.source.thresholds + ' ' + d.source.directions;
})
}.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 3px;
}
.node text {
font: 12px sans-serif;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 2px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>