Angular - 缩放在代码中创建的内联 d3 SVG

标签 angular svg d3.js scale

这是我的第一个问题,如果我搞砸了,我深表歉意。

我正在使用 d3 库在 Angular 中构建一个简单的 SVG,但我无法缩放它。

我在这里阅读了大量关于 SVG 的文章 https://css-tricks.com/scale-svg/我选择了在 viewbox 中构建 SVG 的方法,然后应用 widthheight 属性。

检查 SVG 时,我发现它占用了指定的 100pxwidthheight,但是 SVGElements 本身还是原来的大小。

但是!如果不是通过代码设置 widthheight,而是通过编辑 SVG 修改 widthheight作为 Dev Tools 中的 HTML(即:width="100px"height="100px"),然后它可以完美缩放!

我在这里做了一个 plunker:https://plnkr.co/edit/kYcTocJzi6eA59Yj?preview - 第一个 SVG 通过代码设置 widthheight,而第二个 SVG 没有设置它们,因此您可以在 Dev Tools 如果需要的话:)

感谢您的宝贵时间!

最佳答案

In SVG , viewBox 是驼峰式的,但是你输入的是 viewbox:

const svg2 = d3.select(this.svgContainerRef2.nativeElement)
  .append('svg')
  .attr('viewBox', `0 0 ${circleRadius * 2} ${circleRadius * 2}`);

关于Angular - 缩放在代码中创建的内联 d3 SVG,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63916870/

相关文章:

reactjs - SVG 组件发出警告

html - SVG + CSS : sizing one image inside another

d3.js - 凸包不适用于缩放/平移

d3.js - D3 : passing object in style method is not working

angular - 使用主题和代理传递数据

javascript - 如何将 NGBootstrap 工具提示附加到 Font Awesome 图标

angular - 使用 Bootstrap 和 sass 对 Angular 应用程序和库进行主题化

angular - 如何在不使用 HttpIntercepter 的情况下在 Angular 中获取自定义响应 header

css - SVG Rect 忽略高度?

svg - 在 D3 条形图上添加标签