javascript – D3选择性缩放

2019-07-18 08:35:35 阅读：239 来源： 互联网

标签：javascript zoom d3-js force-layout

我正在研究一种力导向的图形布局,其中包含一些附加功能：可选择的链接/节点,工具提示,鱼眼效果,以及 – 对我的问题很重要 – 缩放和平移.

现在,缩放工作非常好,如下所示：

d3 ... .append('svg:g').call(d3.behavior.zoom().on("zoom", redraw))...

重绘功能看起来像这样……

function redraw() {
  trans = d3.event.translate;
  scale = d3.event.scale;
  vis.attr("transform", "translate(" + trans + ")" + " scale(" + scale + ")");
}

但是,此方法会缩放整个SVG图形,包括字体大小,图形边缘,节点周围的线条笔划宽度等.

是否有可能不缩放某些元素？到目前为止,我看到的唯一解决方案就是放一条这样的线(从这里开始http://jsfiddle.net/56RDx/2/)

node.attr("font-size", (nodeFontSize / d3.event.scale) + "px");

在重绘方法中,基本上反转某些元素的动态缩放.然而,我的问题是(除了这是一个丑陋的黑客),我的边缘宽度是在图形绘制上动态生成的(根据一些图形属性…),所以这种’反转’方法不起作用……

解决方法:

>您可以向要触发缩放的元素添加一个类：

d3 ... .append('svg:g').classed("some_classname", true).call(d3.behavior.zoom().on("zoom", redraw))...

然后做：

function redraw() {
  trans = d3.event.translate;
  scale = d3.event.scale;
  vis.selectAll("some_classname").attr("transform", "translate(" + trans + ")" + " scale(" + scale + ")");
}

>或者你可以为你不想触发缩放的所有元素添加一个类然后使用CSS3：not伪类：

function redraw() {
  trans = d3.event.translate;
  scale = d3.event.scale;
  vis.selectAll("*:not(.some_classname)").attr("transform", "translate(" + trans + ")" + " scale(" + scale + ")");
}

标签：javascript,zoom,d3-js,force-layout
来源： https://codeday.me/bug/20190718/1494574.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – D3选择性缩放