From 409695c99acf97f9d2216e3e02ea897253384c46 Mon Sep 17 00:00:00 2001 From: Daryl110 Date: Fri, 30 Oct 2020 10:27:28 -0500 Subject: [PATCH] [#23] collapsable tree chart resize correction --- package-lock.json | 70 +------------------ package.json | 2 +- .../d3/charts/collapsableTree.chart.js | 21 +++--- 3 files changed, 14 insertions(+), 79 deletions(-) diff --git a/package-lock.json b/package-lock.json index ca275f9..72c01dc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@daryl110/go-chart", - "version": "1.1.1", + "version": "1.2.4", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -248,11 +248,6 @@ "@types/babel-types": "*" } }, - "@types/d3-selection": { - "version": "1.0.10", - "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-1.0.10.tgz", - "integrity": "sha1-3PsN3837GtJq6kNRMjdx4a6pboQ=" - }, "acorn": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz", @@ -778,69 +773,6 @@ "d3-path": "1" } }, - "d3-svg-legend": { - "version": "2.25.6", - "resolved": "https://registry.npmjs.org/d3-svg-legend/-/d3-svg-legend-2.25.6.tgz", - "integrity": "sha1-jY3BvWk8N47ki2+CPook5o8uGtI=", - "requires": { - "@types/d3-selection": "1.0.10", - "d3-array": "1.0.1", - "d3-dispatch": "1.0.1", - "d3-format": "1.0.2", - "d3-scale": "1.0.3", - "d3-selection": "1.0.2", - "d3-transition": "1.0.3" - }, - "dependencies": { - "d3-array": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.0.1.tgz", - "integrity": "sha1-N1wCh0/NlsFu2fG89bSnvlPzWOc=" - }, - "d3-dispatch": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.1.tgz", - "integrity": "sha1-S9ZaQ87P9DGN653yRVKqi/KBqEA=" - }, - "d3-format": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.0.2.tgz", - "integrity": "sha1-E4YYMgtLvrQ7XA/zBRkHn7vXN14=" - }, - "d3-scale": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-1.0.3.tgz", - "integrity": "sha1-T56PDMLqDzkl/wSsJ63AkEX6TJA=", - "requires": { - "d3-array": "1", - "d3-collection": "1", - "d3-color": "1", - "d3-format": "1", - "d3-interpolate": "1", - "d3-time": "1", - "d3-time-format": "2" - } - }, - "d3-selection": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.0.2.tgz", - "integrity": "sha1-rmYq/UcCrJxdoDmyEHoXZPockHA=" - }, - "d3-transition": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.0.3.tgz", - "integrity": "sha1-kdyYa92zCXNjkyCoXbcs5KsaJ7s=", - "requires": { - "d3-color": "1", - "d3-dispatch": "1", - "d3-ease": "1", - "d3-interpolate": "1", - "d3-selection": "1", - "d3-timer": "1" - } - } - } - }, "d3-time": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.1.0.tgz", diff --git a/package.json b/package.json index 9792bd8..1447ac7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@daryl110/go-chart", - "version": "1.2.4", + "version": "1.2.5", "description": "library to easily build charts", "main": "index.js", "author": "daryl110", diff --git a/src/modules/d3/charts/collapsableTree.chart.js b/src/modules/d3/charts/collapsableTree.chart.js index 32c78ff..e4ab976 100644 --- a/src/modules/d3/charts/collapsableTree.chart.js +++ b/src/modules/d3/charts/collapsableTree.chart.js @@ -134,21 +134,24 @@ module.exports = ( let left = root; let right = root; + root.eachBefore(node => { if (node.x < left.x) left = node; if (node.x > right.x) right = node; }); + const height1 = right.x - left.x + margin.top + margin.bottom; + const transition = svg.transition() .duration(duration) - .attr('viewBox', [-margin.left, left.x - margin.top, width, height]) - .tween('resize', window.ResizeObserver ? null : () => () => svg.dispatch('toggle')); + .attr('viewBox', [-margin.left, left.x - margin.top, width, height1]) + .tween('resize', window.ResizeObserver ? null : () => svg.dispatch('toggle')); const node = gNode.selectAll('g') .data(nodes, d => d.id); const nodeEnter = node.enter().append('g') - .attr('transform', d => `translate(${source.y0},${source.x0})`) + .attr('transform', () => `translate(${source.y0},${source.x0})`) .attr('fill-opacity', 0) .attr('stroke-opacity', 0) .on('click', d => { @@ -177,7 +180,7 @@ module.exports = ( .attr('stroke-opacity', 1); node.exit().transition(transition).remove() - .attr('transform', d => `translate(${source.y},${source.x})`) + .attr('transform', () => `translate(${source.y},${source.x})`) .attr('fill-opacity', 0) .attr('stroke-opacity', 0); @@ -185,9 +188,9 @@ module.exports = ( .data(links, d => d.target.id); const linkEnter = link.enter().append('path') - .attr('d', d => { - const o = {x: source.x0, y: source.y0}; - return diagonal({source: o, target: o}); + .attr('d', () => { + const o = { x: source.x0, y: source.y0 }; + return diagonal({ source: o, target: o }); }); link.merge(linkEnter).transition(transition) @@ -195,8 +198,8 @@ module.exports = ( link.exit().transition(transition).remove() .attr('d', () => { - const o = {x: source.x, y: source.y}; - return diagonal({source: o, target: o}); + const o = { x: source.x, y: source.y }; + return diagonal({ source: o, target: o }); }); root.eachBefore(d => {