DevExtreme v23.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

Drill Down

If you bind a TreeMap to a data source with a hierarchical structure, you can enable drill-down and drill-up functionality:

  • "Drill down" means navigate to a more detailed view.
  • "Drill up" means navigate back up a level.

In this demo, you can click/tap a group of TreeMap tiles to drill down. Once you go down a level, navigation links appear at the top of the TreeMap. Use them to drill back up. To implement this technique, follow the steps below:

  1. Set the interactWithGroup property to true to force the control to hot-track entire groups instead of individual items.

  2. Call the node.drillDown method in the TreeMap onClick handler.

  3. To enable drill-up functionality, generate links in the onDrill handler. Call the node.drillDown method on link clicks. Inspect the code below for implementation details.

www.wikipedia.org
Backend API
<template> <div> <DxTreeMap :data-source="citiesPopulation" :interact-with-group="true" :max-depth="2" @click="nodeClick" @drill="drill" > <DxSize :height="440"/> <DxColorizer palette="Soft"/> <DxTitle :placeholder-size="80" text="The Most Populated Cities by Continents" /> </DxTreeMap> <div id="drill-down-title"> <span v-for="(info, index) in drillInfo" :key="index" > <span :class="{'link': !!info.node}" @click="drillInfoClick(info.node)" >{{ info.text }}</span> <span v-if="index !== drillInfo.length - 1"> > </span> </span> </div> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; import DxTreeMap, { DxSize, DxTitle, DxColorizer, DxTreeMapTypes, } from 'devextreme-vue/tree-map'; import { citiesPopulation } from './data.ts'; const drillInfo = ref([]); function nodeClick({ node }: DxTreeMapTypes.ClickEvent) { node.drillDown(); } function drill(e: DxTreeMapTypes.DrillEvent) { drillInfo.value = []; for (let node = e.node.getParent(); node; node = node.getParent()) { drillInfo.value.unshift({ text: node.label() || 'All Continents', node, }); } if (drillInfo.value.length) { drillInfo.value.push({ text: e.node.label(), }); } } function drillInfoClick(node) { node?.drillDown(); } </script> <style> #drill-down-title { position: absolute; top: 50px; height: 36px; width: 100%; text-align: center; } .link { color: #337ab7; text-decoration: underline; cursor: pointer; } </style>
window.exports = window.exports || {}; window.config = { transpiler: 'plugin-babel', meta: { '*.vue': { loader: 'vue-loader', }, '*.ts': { loader: 'demo-ts-loader', }, '*.svg': { loader: 'svg-loader', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, }, paths: { 'root:': '../../../../../', 'npm:': 'https://unpkg.com/', }, map: { 'vue': 'npm:vue@3.3.4/dist/vue.esm-browser.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@1.1.1/index.js', 'demo-ts-loader': 'root:utils/demo-ts-loader.js', 'svg-loader': 'root:utils/svg-loader.js', 'mitt': 'npm:mitt/dist/mitt.umd.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@23.2.5/cjs', 'devextreme-vue': 'npm:devextreme-vue@23.2.5/cjs', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.6.4/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.5/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.51/dist/dx-gantt.js', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12', 'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js', 'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js', // Prettier 'prettier/standalone': 'npm:prettier@2.8.4/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.4/parser-html.js', }, packages: { 'devextreme-vue': { main: 'index.js', }, 'devextreme': { defaultExtension: 'js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.12/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, }, }; System.config(window.config);
export const citiesPopulation = [{ name: 'Africa', items: [{ name: 'Nigeria', items: [{ name: 'Lagos', value: 21324000, }, { name: 'Kano', value: 3626068, }, { name: 'Ibadan', value: 3200000, }, { name: 'Abuja', value: 3000000, }, { name: 'Kaduna', value: 1652844, }, { name: 'Port Harcourt', value: 1320214, }, { name: 'Aba', value: 1300000, }, { name: 'Ogbomosho', value: 1200000, }, { name: 'Maiduguri', value: 1197497, }], }, { name: 'Egypt', items: [{ name: 'Cairo', value: 9278441, }, { name: 'Alexandria', value: 4546231, }, { name: 'Giza', value: 4239988, }, { name: 'Shubra El-Kheima', value: 3072951, }, { name: 'Port Said', value: 1607353, }, { name: 'Suez', value: 1347352, }], }, { name: 'Congo', items: [{ name: 'Kinshasa', value: 9735000, }, { name: 'Lubumbashi', value: 1786397, }, { name: 'Mbuji-Mayi', value: 1680991, }, { name: 'Kananga', value: 1061181, }, { name: 'Bukavu', value: 1012053, }, { name: 'Kisangani', value: 935977, }], }, { name: 'Morocco', items: [{ name: 'Casablanca', value: 3359818, }, { name: 'Fès', value: 1112072, }, { name: 'Tangier', value: 947952, }, { name: 'Marrakech', value: 928850, }, { name: 'Salé', value: 920403, }], }], }, { name: 'Asia', items: [{ name: 'China', items: [{ name: 'Shanghai', value: 24256800, }, { name: 'Beijing', value: 21516000, }, { name: 'Chongqing', value: 18384100, }, { name: 'Chengdu', value: 17677122, }, { name: 'Tianjin', value: 15200000, }, { name: 'Guangzhou', value: 13080500, }, { name: 'Shenzhen', value: 10630000, }], }, { name: 'Pakistan', items: [{ name: 'Karachi', value: 23500000, }, { name: 'Faisalabad', value: 6418745, }, { name: 'Lahore', value: 6318745, }, { name: 'Rawalpindi', value: 3363911, }, { name: 'Hyderabad', value: 3429471, }, { name: 'Multan', value: 2050000, }], }, { name: 'India', items: [{ name: 'Delhi', value: 16787941, }, { name: 'Mumbai', value: 12478447, }, { name: 'Bengaluru', value: 8425970, }, { name: 'Hyderabad', value: 7749334, }, { name: 'Chennai', value: 7088000, }, { name: 'Ahmedabad', value: 5577940, }], }, { name: 'Japan', items: [{ name: 'Tokyo', value: 9262046, }, { name: 'Yokohama', value: 3697894, }, { name: 'Osaka', value: 2668586, }, { name: 'Nagoya', value: 2283289, }, { name: 'Sapporo', value: 1918096, }], }], }, { name: 'Europe', items: [{ name: 'Turkey', items: [{ name: 'Istanbul', value: 14160467, }, { name: 'Ankara', value: 4470800, }, { name: 'İzmir', value: 3276815, }, { name: 'Bursa', value: 1957247, }, { name: 'Adana', value: 1717473, }], }, { name: 'Russia', items: [{ name: 'Moscow', value: 12197596, }, { name: 'Saint Petersburg', value: 5191690, }, { name: 'Novosibirsk', value: 1473754, }, { name: 'Yekaterinburg', value: 1428042, }], }, { name: 'United Kingdom', items: [{ name: 'London', value: 8538689, }, { name: 'Birmingham', value: 1101360, }, { name: 'Glasgow', value: 599650, }, { name: 'Liverpool', value: 473073, }], }, { name: 'Germany', items: [{ name: 'Berlin', value: 3517424, }, { name: 'Hamburg', value: 1686100, }, { name: 'Munich', value: 1185400, }, { name: 'Cologne', value: 1046680, }, { name: 'Frankfurt', value: 717624, }], }, { name: 'France', items: [{ name: 'Paris', value: 2240621, }, { name: 'Marseille', value: 852516, }, { name: 'Lyon', value: 500715, }, { name: 'Toulouse', value: 461190, }], }], }, { name: 'North America', items: [{ name: 'Mexico', items: [{ name: 'Mexico City', value: 8874724, }, { name: 'Ecatepec de Morelos', value: 1742023, }, { name: 'Puebla', value: 1508707, }, { name: 'Guadalajara', value: 1506359, }, { name: 'Juárez', value: 1409987, }, { name: 'Tijuana', value: 1399282, }, { name: 'León', value: 1281434, }], }, { name: 'United States', items: [{ name: 'New York City', value: 8550405, }, { name: 'Los Angeles', value: 3884307, }, { name: 'Chicago', value: 2722389, }, { name: 'Houston', value: 2296224, }, { name: 'Philadelphia', value: 1567442, }, { name: 'Phoenix', value: 1563025, }, { name: 'San Antonio', value: 1469845, }, { name: 'San Diego', value: 1394928, }], }, { name: 'Canada', items: [{ name: 'Toronto', value: 2808503, }, { name: 'Montreal', value: 1731245, }, { name: 'Calgary', value: 1096833, }, { name: 'Ottawa', value: 956710, }, { name: 'Edmonton', value: 895000, }, { name: 'Mississauga', value: 713443, }], }, { name: 'Cuba', items: [{ name: 'Havana', value: 2135498, }, { name: 'Santiago de Cuba', value: 425851, }, { name: 'Camagüey', value: 305845, }], }], }, { name: 'South America', items: [{ name: 'Brazil', items: [{ name: 'São Paulo', value: 11895893, }, { name: 'Rio de Janeiro', value: 6429923, }, { name: 'Salvador', value: 2902927, }, { name: 'Brasília', value: 2914830, }, { name: 'Fortaleza', value: 2591188, }, { name: 'Belo Horizonte', value: 2513451, }, { name: 'Manaus', value: 2094391, }], }, { name: 'Peru', items: [{ name: 'Lima', value: 8693387, }, { name: 'Callao', value: 1010315, }, { name: 'Arequipa', value: 869351, }, { name: 'Trujillo', value: 788236, }, { name: 'Chiclayo', value: 600440, }], }, { name: 'Colombia', items: [{ name: 'Bogotá', value: 7776845, }, { name: 'Medellín', value: 2441123, }, { name: 'Cali', value: 2400653, }, { name: 'Barranquilla', value: 1214253, }, { name: 'Cartagena', value: 959594, }], }, { name: 'Chile', items: [{ name: 'Santiago', value: 5507282, }, { name: 'Puente Alto', value: 610118, }, { name: 'Maipú', value: 468390, }], }, { name: 'Venezuela', items: [{ name: 'Caracas', value: 3289886, }, { name: 'Maracaibo', value: 1653211, }, { name: 'Barquisimeto', value: 1116182, }, { name: 'Valencia', value: 901900, }, { name: 'Ciudad Guayana', value: 877547, }], }], }];
import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');
<!DOCTYPE html> <html> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.2.5/css/dx.light.css" /> <script src="https://unpkg.com/typescript@4.2.4/lib/typescript.js"></script> <script type="module"> import * as vueCompilerSFC from "https://unpkg.com/@vue/compiler-sfc@3.3.4/dist/compiler-sfc.esm-browser.js"; window.vueCompilerSFC = vueCompilerSFC; </script> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.ts"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </body> </html>