Javascript D3中从右向左的树方向

如何将D3树方向设置为从右向左

我使用以下代码渲染树，但我想将方向设置为从右向左：

这是一个由D3实现的树映射，当前方向是LTR，也是一个可折叠树

var treeData = "";

var margin = { top: 20, right: 90, bottom: 30, left: 90 },
    width = 1900 - margin.left - margin.right,
    height = 900 - margin.top - margin.bottom;

var svg = d3.select("#chart").append("svg")       
    .attr("width", 1600)
    .attr("height", 3200)
    .append("g")
    .attr("transform", "translate("
    + margin.left + "," + margin.top + ")");

var i = 0,
    duration = 2000,
    root;

var treemap = d3.tree().size([height, width]);

root = d3.hierarchy(treeData, function (d) { return d.children; });
root.x0 = height / 2;
root.y0 = 0;

root.children.forEach(collapse);

update(root);

function collapse(d) {

}

function update(source) {
}

---

有一个示例演示了如何做到这一点，但它基于D3.js v.3

您还可以使用

d3.linkHorizontal（）.x（d=>width-d.y）

。对于从左到右的树，它是

d3.linkHorizontal（）.x（d=>d.y）

-请不要问我为什么

.x（…）

返回

d.y

一种更简单的方法是使用

变换翻转
，然后翻转所有
元素并稍微对齐：

svg.attr（“变换”、“缩放（-1,1）”）；
svg
.selectAll（“文本”）
.attr（“变换”、“缩放（-1,1）”）
.attr（“文本锚点”，（d）=>（d.depth==0？“开始”：“结束”））
.attr（“x”，函数（d）{
返回d3。选择（this）.attr（“文本锚定”）=“开始”？6:-6；
});

以下是一个工作示例：