zoukankan      html  css  js  c++  java
  • 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/

  • 相关阅读:
    Python实现ftp服务(1)
    MYSQL/HIVESQL笔试题(六):HIVESQL(六)
    Hive基础(16):Hive函数(8) 常用函数
    MYSQL/HIVESQL笔试题(五):HIVESQL(五)
    MYSQL/HIVESQL笔试题(四):HIVESQL(四)
    MYSQL/HIVESQL笔试题(三):HIVESQL(三)
    498. Diagonal Traverse
    493. Reverse Pairs
    1021. Remove Outermost Parentheses
    490. The Maze
  • 原文地址:https://www.cnblogs.com/RainyBear/p/8329174.html
Copyright © 2011-2022 走看看