diff --git a/demos/sankey.html b/demos/sankey.html index 5a76f476ab..22ec849c7c 100644 --- a/demos/sankey.html +++ b/demos/sankey.html @@ -33,6 +33,7 @@

Energy flow

--- config: sankey: + useMaxWidth: true showValues: false width: 1200 height: 600 diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts index 0179e715b7..7433f2b9ce 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts @@ -16,7 +16,7 @@ import { sankeyCenter as d3SankeyCenter, sankeyJustify as d3SankeyJustify, } from 'd3-sankey'; -import { configureSvgSize } from '../../setupGraphViewbox.js'; +import { setupGraphViewbox } from '../../setupGraphViewbox.js'; import { Uid } from '../../rendering-util/uid.js'; import type { SankeyNodeAlignment } from '../../config.type.js'; @@ -70,12 +70,6 @@ export const draw = function (text: string, id: string, _version: string, diagOb const suffix = conf?.suffix ?? defaultSankeyConfig.suffix!; const showValues = conf?.showValues ?? defaultSankeyConfig.showValues!; - // FIX: using max width prevents height from being set, is it intended? - // to add height directly one can use `svg.attr('height', height)` - // - // @ts-ignore TODO: svg type vs selection mismatch - configureSvgSize(svg, height, width, useMaxWidth); - // Prepare data for construction based on diagObj.db // This must be a mutable object with `nodes` and `links` properties: // @@ -208,6 +202,8 @@ export const draw = function (text: string, id: string, _version: string, diagOb .attr('d', d3SankeyLinkHorizontal()) .attr('stroke', coloring) .attr('stroke-width', (d: any) => Math.max(1, d.width)); + + setupGraphViewbox(undefined, svg, 0, useMaxWidth); }; export default { diff --git a/packages/mermaid/src/setupGraphViewbox.js b/packages/mermaid/src/setupGraphViewbox.js index d3df6db7cf..1803412f47 100644 --- a/packages/mermaid/src/setupGraphViewbox.js +++ b/packages/mermaid/src/setupGraphViewbox.js @@ -45,6 +45,7 @@ export const configureSvgSize = function (svgElem, height, width, useMaxWidth) { d3Attrs(svgElem, attrs); }; +// TODO v11: Remove the graph parameter. It is not used. export const setupGraphViewbox = function (graph, svgElem, padding, useMaxWidth) { const svgBounds = svgElem.node().getBBox(); const sWidth = svgBounds.width;