Skip to content

Instantly share code, notes, and snippets.

Last active December 30, 2020 23:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save EE2dev/d9f2fbc1487b2bf89fd9ccab183c052c to your computer and use it in GitHub Desktop.
Save EE2dev/d9f2fbc1487b2bf89fd9ccab183c052c to your computer and use it in GitHub Desktop.
d3-indented-tree API example #15
license: mit

API examples for d3-indented-tree

myChart.linkLabel() - 4

This example shows how to

  • set the link label based on the column color of type string
  • display the label above the link
  • place the link labels in the center of the link (align: "middle")
  • set the margins
  • use a file as the node image
  • set the width and height of the node image
  • draw an empty rectangle before drawing the image (setBackground: true) (to account for transparency of the image which would show otherwise the continuation of the link in the background)
  • determine the link width based on the column weight and mapping the width based the weight values onto the intervall [150, 300]
  • changing the link height to 50 pixels
  • setting the padding of the node label to 20 pixels such that the label is not overlapping the node image


<!DOCTYPE html>
<meta charset="utf-8">
<script src=""></script>
<script src=""></script>
<link rel="stylesheet" href="">
<!-- paste data in aside tag -->
<aside id="data">
const dataSpec = {
source: "aside#data",
const myChart = d3.indentedTree(dataSpec)
.margin({top: 50, right: 10, bottom: 20, left: 50})
.nodeImageFile("", {
width: 20, height: 20, setBackground: true})
.linkLabel("color", {onTop: false, align: "middle"})
.linkWidth("weight",{range: [150, 300]})
window.setTimeout(function() {
}, 2000);
function showChart(_chart) {"body")
.attr("class", "chart")
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment