D3之svg transform 与 css3 transform 区别与联系

　　D3就不用多介绍了，在数据可视化界属于大佬级别的js库。在这里主要想记录一下在写程序期间遇到的一个问题。

　　如下图所示，想完成主视图在小地图上的映射，小地图的白色矩形框用来代表当前主视图可见区域，主视图可以进行缩放和平移。因此涉及到一些变换计算。

mainChart.group = mainChart.svg.append("g")
            .attr("transform", "translate(" + mainChart.width / 2 + "," + mainChart.height / 2 + ")");

        /*mainChart.group的变换导致mainChart.g的坐标原点并不在左上角，而在svg的坐标变换中不能设置变换的相对坐标，但是css3可以设置相对坐标（attr使用svg变换，style使用css3变换）*/
        mainChart.g = mainChart.group.append("g")
            .style("transform-origin", (-mainChart.width / 2) + "px " + (-mainChart.height / 2) + "px");

        mainChart.svg_links = mainChart.g.selectAll(".links") .data(mainChart.result_links) .enter() .append("path") .attr("id", function (d, i) { return "link_" + i; }) .attr("stroke-opacity", mainChart.now_link_opacity) .attr("stroke", mainChart.now_link_color) .attr("stroke-width", mainChart.now_link_size) .attr("fill", "none") .attr("d", mainChart.line); mainChart.svg_nodes_g = mainChart.g.selectAll(".nodes") .data(mainChart.result_nodes.filter(function (d) { return !d.children; })) .enter() .append("g") .attr("id", function (d) { return "node_" + d.id; });

最开始是使用一个g元素将这个视图平移至主视图的正中心，然后再添加一个g元素用来存放点和边的绘制。此时，第二个g元素的坐标原点是以父节点平移后的位置为坐标原点，即主视图正中心为坐标原点。而在小地图中，矩形的变换是以小地图svg的右上角为坐标原点，导致两个坐标原点不能匹配，因此需要完成对坐标原点的修正。而svg的变换中无法设置transform-origin属性，所以采用css3，将第二g元素的坐标原点重新设置为主视图的左上角，从而保持一致。

关于svg的transform和css3的transform区别和联系：http://www.zhangxinxu.com/wordpress/2015/10/understand-svg-transform/

转载于:https://www.cnblogs.com/RainyBear/p/8329174.html