在D3 v4中replaced3.transform
在D3.js v4中，d3.transform方法已被删除，没有提示如何replace它。 有谁知道如何replace下面的D3.js v3指令？
d3.transform(String).translate; 编辑2016-10-07：有关更一般的方法，请参阅下面的附录。
根据更新日志，它已经不存在了。 然而， transform/decompose.js有一个函数，它为内部使用做了计算。 可悲的是，它并没有暴露在外部使用。
也就是说，即使不使用任何D3，也很容易完成：
function getTranslation(transform) { // Create a dummy g for calculation purposes only. This will never // be appended to the DOM and will be discarded once this function // returns. var g = document.createElementNS("http://www.w3.org/2000/svg", "g"); // Set the transform attribute to the provided string value. g.setAttributeNS(null, "transform", transform); // consolidate the SVGTransformList containing all transformations // to a single SVGTransform of type SVG_TRANSFORM_MATRIX and get // its SVGMatrix. var matrix = g.transform.baseVal.consolidate().matrix; // As per definition values e and f are the ones for the translation. return [matrix.e, matrix.f]; } console.log(getTranslation("translate(20,30)")) // simple case: should return [20,30] console.log(getTranslation("rotate(45) skewX(20) translate(20,30) translate(-5,40)"))
如果你通过npm parseSvg d3 v4，你可以直接导入src/transform/parse文件并调用parseSvg ：
// using es2015 modules syntax import { parseSvg } from "d3-interpolate/src/transform/parse"; parseSvg("translate(20, 20)");
在具有d3.js zoom监听器的元素上 – 通常是附加到svg元素的<g>元素 – 您可以使用此调用来获取缩放函数外部的转换属性：
var self = this; var t = d3.zoomTransform(self.svg.node()); // t = {k: 1, x: 0, y: 0} or your current transformation values
这将返回与在缩放事件函数本身内调用d3.event.transform时相同的值。
在缩放事件函数外部调用d3.event.transform将会报错： Uncaught TypeError: Cannot read property 'transform' of null
我必须使用d3.zoomTransform来允许从graphics外部的button进行平移和缩放。
我晚了一点，但是我有一些对我有益的代码，我希望它也能帮助你。
上面的@altocumulus代码是相当透彻的，像魅力一样工作。 然而，这并不能满足我的需求，因为我手工进行了计算，需要尽可能无痛地改变一些变换属性。
这可能不是每个人的解决scheme，但它对我来说是完美的。
function _getTokenizedTransformAttributeValue(transformStr) { var cleanedUpTransformAttrArr = transformStr.split(')', ).slice(0,-1); return cleanedUpTransformAttrArr.reduce(function(retObj, item) { var transformPair = item.split('('); retObj[transformPair[0]] = transformPair[1].split(','); return retObj; }, {}); }
function _getStringFromTokenizedTransformAttributeObj(transformAttributeObj) { return _.keys(transformAttributeObj).reduce(function(finalStr, key) { // wrap the transformAttributeObj[key] in array brackets to ensure we have an array // join will flatten the array first and then do the join so [[x,y]].join(',') -> "x,y" return finalStr += key + "(" + [transformAttributeObj[key]].join(',') + ")"; }, ''); }
第一个function真正伟大的事情是，我可以手动改变一个特定的属性（例如旋转），而不必担心它是如何影响翻译或任何其他（绕一个点旋转时），而当我依靠build-in甚至d3.transform方法将所有属性合并为一个值。
为什么这很酷？
想象一下一些HTML
<g class="tick-label tick-label--is-rotated" transform="translate(542.8228777985075,0) rotate(60, 50.324859619140625, 011.402383210764288)" style="visibility: inherit;"></g>
使用d3.transfrom我得到：
在对象forms
jr {rotate: 59.99999999999999, translate: [577.8600589984691, -37.88141544673796], scale: [1, 1], skew: 0, toString: function}
以stringforms
"translate(577.8600589984691,-37.88141544673796)rotate(59.99999999999999)skewX(0)scale(1,1)"
这在math上是正确的，但是使我很难简单地去除旋转angular度和必须引入的平移以围绕给定点旋转这个元素。
使用我的_getTokenizedTransformAttributeValue函数
在对象forms
{translate: ["542.8228777985075", "0"], rotate: ["60", " 50.324859619140625", " 011.402383210764288"]}
以stringforms使用函数_getStringFromTokenizedTransformAttributeObj
"translate(542.8228777985075,0)rotate(60, 50.324859619140625, 011.402383210764288)"
这是完美的，因为现在当你删除旋转，你的元素可以回到原来的位置
诚然，代码可能更清洁，函数名称更简洁，但我真的想把它弄清楚，以便其他人可以从中受益。
我find了一种方式来达到类似的使用这个：
d3.select(this).node().getBBox();
这会给你访问x / y的位置和宽度/高度你可以在这里看到一个例子： https ： //bl.ocks.org/mbostock/1160929
我发现一个比这个简单一点的解决scheme。
selection.node().transform.baseVal[0].matrix
在这个matrix中，你有坐标e和f女巫相当于x，y。 （e === x，f === y）。 没有必要实现你自己的function。
baseVal是元素转换的列表。 没有以前的转换，你不能使用它。 （列表将是空的）或者，如果您对对象做了多次转换，则最后一个位置将位于baseVal列表的最后一个元素下面。
