Question

尝试创建一个具有缩放和平移以及可选节点的示例。我面临的问题是，当负责缩放的矩形位于代表节点的圆圈上方时，此层将停止click事件。当我将缩放层移动到圆圈下方时，如下面的示例所示，当我在圆圈上时，缩放和平移功能停止工作。我希望能够缩放和平移svg区域中的任何位置，而我希望能够选择单击其视觉表示的节点。

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:elevation="3dp"
    card_view:cardCornerRadius="12dp"
    card_view:contentPadding="10dp"
    android:layout_marginTop="8dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/platforms_title_txt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:drawablePadding="5dp"
            android:fontFamily="@font/roboto"
            android:gravity="center_vertical"
            android:text="@string/platforms"
            android:textAllCaps="true"
            android:textColor="@color/colorTextStandard"
            android:textSize="20sp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"/>

        <TextView
            android:id="@+id/platforms_count_txt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginTop="8dp"
            android:fontFamily="@font/roboto"
            tools:text="4"
            android:drawablePadding="5dp"
            android:drawableStart="@drawable/ic_menu_monitor"
            android:textColor="@color/colorTextStandard"
            android:textSize="14sp"
            android:layout_alignParentEnd="true"
            android:layout_alignParentTop="true"/>

        <com.github.mikephil.charting.charts.PieChart
            android:id="@+id/platforms_chart"
            android:layout_width="match_parent"
            android:layout_height="@dimen/platforms_card_height"
            android:layout_below="@id/platforms_title_txt"/>

    </RelativeLayout>

Answer 1

最后弄清楚了怎么做。我在可缩放图层上移动了圆圈。现在一切都变得神奇。我只发布修改内容：

            var zoomable_layer = svg.append( "g" );

            // var zoom = d3.zoom().on("zoom", zoomed).scaleExtent([1 / 10, 30]);
            var zoom = d3.zoom()
                .scaleExtent([1 / 10, 30])
                .on("zoom", () => {
                    zoomable_layer.attr("transform", d3.event.transform )
                });

            var zz = graph.nodes.map( function ( n ) { return n.value } );
            var max = d3.max( zz );
            var scale = d3.scaleLinear().domain( [0, max] ).range( [5, 50] );

            var zz1 = graph.links.map( function ( n ) { return n.value } );
            var max1 = d3.max( zz1 );
            var scale1 = d3.scaleLinear().domain( [0, max1] ).range( [0, 50] );

            for ( var xx in graph.links )
            {
                xx.value = scale1( xx.value );
            }

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

            var link = zoomable_layer
                .attr("class", "links")
                .selectAll("line")
                .data(graph.links)

            var node = zoomable_layer
                .attr("class", "nodes")
                .selectAll("circle")
                .data(graph.nodes)
                .enter().append("circle")
                .attr( "r", function ( d ) { return scale( d.value ); } )
                .attr("cx", function (d, i) { return d.x })
                .attr("cy", function (d, i) { return d.y })
                .attr("cursor", "pointer")
                .attr("fill", function(d) { return color(d.group); })
                .on("click", function(d){
                    self.emitter.fire(consts.EVENT_SHOW_NODE_INFO, self.component, {_id : d.id});
                });

            svg.append("text")
                .attr("x", (200))
                .attr("y", height-20)
                .attr("text-anchor", "middle")
                .style("font-size", "16px")
                .style("font-style", "italic")
                .style('fill', 'orange')
                .text("Scroll to zoom in and out and explore the clusters of entities.");

            node.append("title")
                .text(function(d) { var arr = d.id.split(":"); let t = arr[arr.length-1]; return t; });

d3单击事件通过缩放和平移图层停止

1 个答案: