How Can D3.Transform Be Used in D3 V4

How can d3.transform be used in d3 v4?

Edit 2016-10-07: For a more general approach see addendum below.

According to the changelog it is gone. There is a function in transform/decompose.js, though, which does the calculations for internal use. Sadly, it is not exposed for external use.

That said, this is easily done even without putting any D3 to use:

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)"))

D3 v4: element 'snaps' to previous translate after programmatic transform

Seems like you are applying the zoom behavior to two different nodes - svgMain and svg.

Try running svgMain.call(zoom.translateBy, 100, 100) instead of svg.call(...) and see if it solves the problem.

update function to transform long data to wide data in d3v4

Well, that ended up being easy.
I just had to change:

.map(function(d) {
  return d.values;
});

to:

.map(function(d) {
  return d.value;
});

The below code works.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>   
</head>
<body>
    <script>
        var long_data = [
        {date: "01/02/20", value: "3628", age_group: "1 to 18"},
        {date: "01/15/20", value: "3634", age_group: "1 to 18"},
        {date: "02/03/20", value: "3619", age_group: "1 to 18"},
        {date: "02/18/20", value: "3593", age_group: "1 to 18"},
        {date: "03/02/20", value: "3605", age_group: "1 to 18"},
        {date: "03/16/20", value: "3444", age_group: "1 to 18"},
        {date: "04/01/20", value: "3007", age_group: "1 to 18"},
        {date: "01/02/20", value: "5753", age_group: "19 to 30"},
        {date: "01/15/20", value: "5817", age_group: "19 to 30"},
        {date: "02/03/20", value: "5850", age_group: "19 to 30"},
        {date: "02/18/20", value: "5826", age_group: "19 to 30"},
        {date: "03/02/20", value: "5881", age_group: "19 to 30"},
        {date: "03/16/20", value: "5685", age_group: "19 to 30"},
        {date: "04/01/20", value: "4876", age_group: "19 to 30"},
        {date: "01/02/20", value: "2347", age_group: "31 to 45"},
        {date: "01/15/20", value: "2356", age_group: "31 to 45"},
        {date: "02/03/20", value: "2394", age_group: "31 to 45"},
        {date: "02/18/20", value: "2427", age_group: "31 to 45"},
        {date: "03/02/20", value: "2418", age_group: "31 to 45"},
        {date: "03/16/20", value: "2371", age_group: "31 to 45"},
        {date: "04/01/20", value: "1993", age_group: "31 to 45"},
        {date: "01/02/20", value: "1691", age_group: "46 to 70"},
        {date: "01/15/20", value: "1727", age_group: "46 to 70"},
        {date: "02/03/20", value: "1721", age_group: "46 to 70"},
        {date: "02/18/20", value: "1736", age_group: "46 to 70"},
        {date: "03/02/20", value: "1726", age_group: "46 to 70"},
        {date: "03/16/20", value: "1707", age_group: "46 to 70"},
        {date: "04/01/20", value: "1498", age_group: "46 to 70"},
        {date: "01/02/20", value: "3372", age_group: "70 and above"},
        {date: "01/15/20", value: "3368", age_group: "70 and above"},
        {date: "02/03/20", value: "3359", age_group: "70 and above"},
        {date: "02/18/20", value: "3407", age_group: "70 and above"},
        {date: "03/02/20", value: "3354", age_group: "70 and above"},
        {date: "03/16/20", value: "3252", age_group: "70 and above"},
        {date: "04/01/20", value: "2777", age_group: "70 and above"}
        ]

        console.log('long data',long_data)

        var wide = d3.nest()
            .key(function(d) { return d["date"] })
            .rollup(function(d) { 
                return d.reduce(function(prev, curr) {
                prev["date"] = curr["date"];
                prev[curr["age_group"]] = curr["value"];
                return prev;
                }, {});
            })
            .entries(long_data)         
            .map(function(d) {
                return d.value;
            });

        console.log('wide data',wide)
    </script>

</body>
</html>

D3 V4 zoom.transform jump on drag

you simply need to set the call on the svg

svg.call(zoom.transform, d3.zoomIdentity.translate(width / 2, height / 2).scale(2));

How Can D3.Transform Be Used in D3 V4