D3JS daraxti — Oson yo‘l

Keling, D3JS-dan oson yo'l, ya'ni oddiy JavaScript kutubxonasi sifatida foydalanaylik.

Bu qanday oson/oddiy?

JavaScript kutubxonasi sifatida D3.js dan foydalanadi, reaksiya yo'q.
Oddiy eski bloknot va bitta HTML fayl, veb-server yo'q.

Biz nima qilyapmiz?

Biz ierarxik ma'lumotlardan foydalangan holda va kuzatilishi mumkin bo'lgan koddan foydalangan holda D3 daraxtini yaratmoqdamiz.

1-qadam: HTML iskala

<!-- d3js-tree-v7.html -->

<!DOCTYPE html>
<meta charset="utf-8">
<body>
  <div id="demo"></div>
  <script src="https://d3js.org/d3.v7.min.js"></script>
</body>

2-qadam: Daraxt yaratish uchun JavaScript funksiyasini qo'shing

Quyidagi kod daraxt qurish uchun umumiydir va sozlash uchun parametrlarni qabul qiladi. Ushbu kod "bu yerdan" ko'chirildi. Siz 3-bosqichga o'tishingiz mumkin.

<!-- d3js-tree-v7.html -->

<script>
// Copyright 2021 Observable, Inc.
// Released under the ISC license.
// https://observablehq.com/@d3/tree
function Tree(
  data,
  {
    // data is either tabular (array of objects) or hierarchy (nested objects)
    path, // as an alternative to id and parentId, returns an array identifier, imputing internal nodes
    id = Array.isArray(data) ? (d) => d.id : null, // if tabular data, given a d in data, returns a unique identifier (string)
    parentId = Array.isArray(data) ? (d) => d.parentId : null, // if tabular data, given a node d, returns its parent’s identifier
    children, // if hierarchical data, given a d in data, returns its children
    tree = d3.tree, // layout algorithm (typically d3.tree or d3.cluster)
    sort, // how to sort nodes prior to layout (e.g., (a, b) => d3.descending(a.height, b.height))
    label, // given a node d, returns the display name
    title, // given a node d, returns its hover text
    link, // given a node d, its link (if any)
    linkTarget = "_blank", // the target attribute for links (if any)
    width = 640, // outer width, in pixels
    height, // outer height, in pixels
    r = 3, // radius of nodes
    padding = 1, // horizontal padding for first and last column
    fill = "#999", // fill for nodes
    fillOpacity, // fill opacity for nodes
    stroke = "#555", // stroke for links
    strokeWidth = 1.5, // stroke width for links
    strokeOpacity = 0.4, // stroke opacity for links
    strokeLinejoin, // stroke line join for links
    strokeLinecap, // stroke line cap for links
    halo = "#fff", // color of label halo
    haloWidth = 3, // padding around the labels
    curve = d3.curveBumpX, // curve for the link
    dyNode = 10 // vertical height of node
  } = {}
) {
  // If id and parentId options are specified, or the path option, use d3.stratify
  // to convert tabular data to a hierarchy; otherwise we assume that the data is
  // specified as an object {children} with nested objects (a.k.a. the “flare.json”
  // format), and use d3.hierarchy.
  const root =
    path != null
      ? d3.stratify().path(path)(data)
      : id != null || parentId != null
      ? d3.stratify().id(id).parentId(parentId)(data)
      : d3.hierarchy(data, children);

  // Sort the nodes.
  if (sort != null) root.sort(sort);

  // Compute labels and titles.
  const descendants = root.descendants();
  const L = label == null ? null : descendants.map((d) => label(d.data, d));

  // Compute the layout.
  const dx = dyNode; // vertical height of node
  const dy = (width / (root.height + padding)) * 0.9; // reduced width by 90%, default is without *.9
  tree().nodeSize([dx, dy])(root);

  // Center the tree.
  let x0 = Infinity;
  let x1 = -x0;
  root.each((d) => {
    if (d.x > x1) x1 = d.x;
    if (d.x < x0) x0 = d.x;
  });

  // Compute the default height.
  if (height === undefined) height = x1 - x0 + dx * 2;

  // Use the required curve
  if (typeof curve !== "function") throw new Error(`Unsupported curve`);

  const svg = d3
    .create("svg")
    .attr("viewBox", [(-dy * padding) / 2, x0 - dx, width, height])
    .attr("width", width)
    .attr("height", height)
    .attr("style", "max-width: 100%; height: auto; height: intrinsic;")
    .attr("font-family", "sans-serif")
    .attr("font-size", 10);

  svg
    .append("g")
    .attr("fill", "none")
    .attr("stroke", stroke)
    .attr("stroke-opacity", strokeOpacity)
    .attr("stroke-linecap", strokeLinecap)
    .attr("stroke-linejoin", strokeLinejoin)
    .attr("stroke-width", strokeWidth)
    .selectAll("path")
    .data(root.links())
    .join("path")
    .attr(
      "d",
      d3
        .link(curve)
        .x((d) => d.y)
        .y((d) => d.x)
    );

  const node = svg
    .append("g")
    .selectAll("a")
    .data(root.descendants())
    .join("a")
    .attr("xlink:href", link == null ? null : (d) => link(d.data, d))
    .attr("target", link == null ? null : linkTarget)
    .attr("transform", (d) => `translate(${d.y},${d.x})`);

  node
    .append("circle")
    .attr("fill", (d) => (d.children ? stroke : fill))
    .attr("r", r);

  if (title != null) node.append("title").text((d) => title(d.data, d));

  if (L)
    node
      .append("text")
      .attr("dy", "0.32em")
      .attr("x", (d) => (d.children ? -6 : 6))
      .attr("text-anchor", (d) => (d.children ? "end" : "start"))
      .attr("paint-order", "stroke")
      .attr("stroke", halo)
      .attr("stroke-width", haloWidth)
      .text((d, i) => L[i]);

  return svg.node();
};

</script>

3-qadam: JSON ma'lumotlarini qo'shing

Bu oddiy kichik JSON, lekin quyida biz boshqa fayl, boshqa JSON yoki URL kabi maʼlumotlarni qoʻshishning koʻproq usullarini koʻrib chiqamiz.

<!-- d3js-tree-v7.html -->

<script>
  flare = {
    name: "Top Level",
    children: [
      {
        name: "Level 2: A",
        children: [{ name: "Son of A" }, { name: "Daughter of A" }]
      },
      { name: "Level 2: B" }
    ]
  };

</script>

4-qadam: Hammasini birlashtiring

Daraxt funktsiyasiga ma'lumotlarni qo'shing va parametrlarni o'zgartiring

<!-- d3js-tree-v7.html -->

<script>
  // below uses Tree method defined above, which takes parameters as dict
  // to configure most visuals, it alos has defaults defined, eg width.
  
  chart = Tree(flare, {    // The JSON data
    label: (d) => d.name,  // Name on the node
    width: 400,            // width of chart
    dyNode: 50,            // height of node
  });
  
  // add chart to the DOM
  document.getElementById("demo").appendChild(chart);

</script>

Ma'lumotlarni qo'shishning boshqa variantlari

Variant 1: Faylni o'qing

Siz mahalliy fayl yoki URL manzilini uzatishingiz mumkin
Bu veb-serverga muhtoj, chunki fayl faqat bir xil manbadan o'qilishi mumkin

<!-- d3js-tree-v7.html -->

<script>
...
flare = d3.json("sample-2-level-a-b.json");
...
</script>

Variant 2: JSONni boshqa fayldan JavaScript sifatida oʻqing

Bu JSON-ni boshqa faylga chiqarishning aqlli usuli, lekin uni JavaScript sifatida saqlash

// file: my-json-data.js

mydata = {
  name: "Top Level",
  children: [
    {
      name: "Level 2: A",
      children: [{ name: "Son of A" }, { name: "Daughter of A" }]
    },
    { name: "Level 2: B" }
  ]
};

Asosiy JavaScript faylingizda

<!-- d3js-tree-v7.html -->

<script src="./my-json-data.js"></script>

<script>
...
flare = mydata;
...
</script>

Agar bu erga kelgan bo'lsangiz, rahmat!

Kodni GitHub omborida bu yerda yoki ishchi misol bu yerda CodePenda topishingiz mumkin.

Keyingi:

2-qism - D3JS yig'iladigan daraxt - oson yo'l
3-qism - CSS yoki JavaScript yordamida tugunlarni, havolalarni va matnni qanday o'zgartirish mumkin

D3JS daraxti — Oson yo‘l — 1-qism