在D3.js v4中，d3.transform方法已被删除，没有任何关于如何替换它的提示。 有谁知道如何更换以下D3.js v3指令？
d3.transform(String).translate;
答案 0 :(得分：39)
编辑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)"))
这将使用标准DOM方法为计算目的创建一个虚拟g元素，并将其transform属性设置为包含转换的字符串。然后，它调用SVGTransformList接口的.consolidate()，将可能很长的转换列表合并为SVG_TRANSFORM_MATRIX类型的SVGTransform，其中包含其中所有转换的简化版本matrix财产。每个定义SVGMatrix包含其属性e和f中的翻译值。
使用此函数getTranslation()，您可以重写D3 v3语句
d3.transform(transformString).translate;
作为
getTranslation(transformString);
因为这个答案随着时间的推移而引起了一些兴趣，所以我决定将一个更通用的方法放在一起，不仅能够返回转换，还能返回转换字符串的所有转换定义的值。基本方法与上面原始帖子中列出的方法相同，加上transform/decompose.js的计算结果。此函数将返回一个具有所有转换定义属性的对象，就像前d3.transform()那样。
function getTransformation(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;
// Below calculations are taken and adapted from the private function
// transform/decompose.js of D3's module d3-interpolate.
var {a, b, c, d, e, f} = matrix; // ES6, if this doesn't work, use below assignment
// var a=matrix.a, b=matrix.b, c=matrix.c, d=matrix.d, e=matrix.e, f=matrix.f; // ES5
var scaleX, scaleY, skewX;
if (scaleX = Math.sqrt(a * a + b * b)) a /= scaleX, b /= scaleX;
if (skewX = a * c + b * d) c -= a * skewX, d -= b * skewX;
if (scaleY = Math.sqrt(c * c + d * d)) c /= scaleY, d /= scaleY, skewX /= scaleY;
if (a * d < b * c) a = -a, b = -b, skewX = -skewX, scaleX = -scaleX;
return {
translateX: e,
translateY: f,
rotate: Math.atan2(b, a) * 180 / Math.PI,
skewX: Math.atan(skewX) * 180 / Math.PI,
scaleX: scaleX,
scaleY: scaleY
};
}
console.log(getTransformation("translate(20,30)"));
console.log(getTransformation("rotate(45) skewX(20) translate(20,30) translate(-5,40)"));
答案 1 :(得分：4)
如果您通过npm拉入d3 v4，则可以直接导入src/transform/parse文件并致电parseSvg：
// using es2015 modules syntax
import { parseSvg } from "d3-interpolate/src/transform/parse";
parseSvg("translate(20, 20)");
答案 2 :(得分：3)
在具有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来允许从图表外的按钮进行平移和缩放。
答案 3 :(得分：0)
我找到了比这更简单的解决方案。
selection.node().transform.baseVal[0].matrix
在这个矩阵中你有e和f女巫等于x，y。 （e === x，f === y）。不需要为此实现自己的功能。
baseVal是元素的转换列表。 如果没有转换，你不能将它用于对象！ （列表将为空）或者，如果您对对象进行了多次转换，则最后一个位置将位于baseVal列表的最后一个元素下。
答案 4 :(得分：0)
我参加派对有点晚了，但我有一些对我有益的代码，我希望它也可以帮助你。
@altocumulus上面的代码非常彻底，就像一个魅力。然而，由于我手工进行计算并且需要尽可能轻松地改变某些变换属性，因此它不能完全满足我的需求。
这可能不是每个人的解决方案，但它对我来说非常完美。
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(',') + ")";
}, '');
}
第一个功能的真正好处是我可以手动改变特定属性（例如旋转），而不必担心它如何影响平移或其他任何东西（当绕一个点旋转时），而当我依赖在内置或甚至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>
以对象形式
jr {rotate: 59.99999999999999, translate: [577.8600589984691, -37.88141544673796], scale: [1, 1], skew: 0, toString: function}
以字符串形式
"translate(577.8600589984691,-37.88141544673796)rotate(59.99999999999999)skewX(0)scale(1,1)"
这在数学上是正确的，但是我很难简单地删除旋转角度和必须引入的平移以围绕给定点旋转此元素。
_getTokenizedTransformAttributeValue功能以对象形式
{translate: ["542.8228777985075", "0"], rotate: ["60", " 50.324859619140625", " 011.402383210764288"]}
使用函数_getStringFromTokenizedTransformAttributeObj
"translate(542.8228777985075,0)rotate(60, 50.324859619140625, 011.402383210764288)"
这是完美的，因为现在当你移除旋转时，你的元素可以回到原来的位置
当然，代码可以更清晰，函数名称更简洁，但我真的想把它放到那里，以便其他人可以从中受益。
答案 5 :(得分：0)
我找到了一种方法，通过使用它来实现类似的东西：
d3.select(this).node().getBBox();
这将使您可以访问x / y位置和宽度/高度 您可以在此处查看示例：https://bl.ocks.org/mbostock/1160929