Question

如何将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) {
}

Answer 1

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

您也可以玩var btnAdd = document.getElementById("add"); var btnRem = document.getElementById("rem"); var container = document.getElementById("cont"); var frm = document.getElementById("frm"); btnAdd.addEventListener("click", () => { var x = document.getElementById("txt").value; var y = document.getElementById("country"); var h = document.getElementById("country").value; var element4 = document.createElement("input"); element4.type = "checkbox"; element4.id = "check"; if (!x || !h) { } else { if (y.selectedIndex == 0) { } else { var base = document.createElement("div"); var b = container.appendChild(base); b.id = "base"; var element = document.createElement("div"); var d = b.appendChild(element); d.appendChild(element4); var element1 = document.createElement("input"); d.appendChild(element1); element1.value = x; element1.id = "text2"; element1.readOnly = true; var array = new Array(); for (var i = 0; i < y.length; i++) { array.push(y.options[i].text); } var element = document.createElement("div"); var d1 = b.appendChild(element); var element2 = document.createElement("select"); var O = d1.appendChild(element2); for (var j = 1; j < array.length; j++) { O.innerHTML += "<option value=" + array[j] + ">" + array[j] + "</option>"; } O.value = h; frm.reset(); y.selectedIndex = 0; } } }); btnRem.addEventListener("click",()=> { var checkbox = document.getElementById("check"); if (checkbox.checked) { alert(checkbox.value) checkbox.parentElement.parentElement.remove(); } });。对于从左到右的树，它是 d3.linkHorizontal().x(d => width - d.y) - 请不要问我为什么 d3.linkHorizontal().x(d => d.y) 返回 .x(...)。

更简单的方法是将 d.y 与 <svg> 翻转，然后将所有 transform 元素翻转回来并稍微对齐：

<text>

这是一个工作示例： https://observablehq.com/@romaklimenko/right-to-left-tidy-tree

D3中从右到左的树方向

1 个答案: