个人中心
gpt4 book ai didi

javascript - 为什么 d3.js 可重复图表上的单击事件创建问题？

转载 作者：行者123 更新时间：2023-12-03 00:29:00 24 4
gpt4 key购买 nike

我使用了 Mike Bostock 描述的可重用图表模式。我面临一个问题。

饼图功能:-
1.当我单击饼图的选项卡时，它应该旋转并将我单击的颜色放在顶部。

问题:-
1.当我点击第一个图表时。该功能已实现，但在第二张图表上实现。

我认为问题与全局声明有关。但我还没有在全局范围内宣布任何事情。

请有人帮我完成这个非常基本的任务。

这是我的 js fiddle 链接，您可以在其中检查此 anamoly。 https://jsfiddle.net/a0u2nk47/ 

<html>
    <head>
        <script type="text/javascript" src="d3.v4.min.js"></script>
        <script type="text/javascript" src="d3-path.v1.min.js"></script>
        <script type="text/javascript" src="d3-shape.v1.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <style>
            body{
                height: 100%;
                width: 100%;
                /*background-image: url("Computer.png");*/
            }
            p{
                float:left;
            }
        </style>
    </head>
    <!-- <img src=Computer.png width="70%" height="100%"> -->
    <p id="chart1"></p>
    <p id="chart2"></p>

<body >

    <script>
        function piechart(){
            var width = 400;
            var height = 400;
            var colors = ['red','green','blue']
            var innerRadius = 40;
            var outerRadius = 60;
            var index = 0;

            var pie = d3.pie()
                .sort(null);

            var arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius).cornerRadius(5).padAngle(0.05);                

            function chart(selection){
                selection.each(function() {

                    svg = d3.select(this)
                            .append('svg')
                            .attr('width',width)
                            .attr('height',height)
                            .append('g')
                            .attr('transform','translate('+width/2+','+height/2+')')

                    path = svg.selectAll("path")
                       .data(pie(data))
                       .enter()
                       .append('path')
                       .attr('d',function(d){return arc(d)})
                       .style('fill',function(d,i){return colors[i]})
                       .style('stroke','black')
                       .each(function(d) { this._current = d; });

                    updateData = function(){
                        path.data(pie(data))
                        path.transition().duration(2000).attrTween("d", arcTween);
                    }
                    updateWidth = function(){
                        innerRadius = width*0.6
                        outerRadius = width*0.8
                        arc.innerRadius(innerRadius).outerRadius(outerRadius);
                        path.transition().duration(1000).attr('d',function(d){return arc(d)});                                                      
                    }
                    path.on("click",chart.click);

                })
            }
            function arcTween(a) {                
              var i = d3.interpolate(this._current, a);
              this._current = i(0);
              return function(t) {
                return arc(i(t));
              };
            }

            chart.data = function(value){

                if(!arguments.length) return data;
                data = value;
                if(typeof updateData === 'function') updateData();
                return chart;
            }

            chart.width = function(value){
                if(!arguments.length) return width;
                width = value;
                if(typeof updateWidth === 'function') updateWidth();
                return chart;
            }

            chart.click = function(value){
                debugger;
                index = this.__data__.index
                console.log(index)
                var rotate = 0-(value.startAngle + value.endAngle)/2 / Math.PI * 180;

                // Transition the pie chart
                svg.transition()
                   .attr("transform", "translate("+width/2+","+height/2+") rotate(" + rotate + ")")
                   .duration(1000);
            }
            return chart
        }
        data = [1,5,8];
        var piechart1 = piechart().data(data);
        d3.select('#chart1').call(piechart1);
        var piechart2 = piechart().data(data);
        d3.select('#chart2').call(piechart2);
    </script>
</body>

最佳答案

当您过渡/转变<g>时元素是 path 的父元素点击后，您可以使用 this.parentNode来改变它。

例如，在click中处理程序，更改以下内容:

svg.transition().attr('....

到

d3.select(this.parentNode).transition().attr('...

尽管我建议您为每个图表分配一个 ID，以便在可重用图表逻辑的情况下将它们分开，并将这个新创建的 ID 用于所有其他功能，而不是依赖于全局变量。例如:

var piechart1 = piechart(1).data(data); // pass an ID here

并按以下方式分配它:

svg.append('g').attr('id', 'container_' + id) // assign the ID

这是一个带有 fiddle 叉的片段:

			function piechart(id){
				var width = 300;
				var height = 300;
				var colors = ['red','green','blue']
				var innerRadius = 40;
				var outerRadius = 60;
				var index = 0;

				var pie = d3.pie()
				    .sort(null);

				var arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius).cornerRadius(5).padAngle(0.05);				

				function chart(selection){
					selection.each(function() {
						svg = d3.select(this)
								.append('svg')
								.attr('width',width)
								.attr('height',height)
								.append('g').attr('id', 'container_' + id)
								.attr('transform','translate('+width/2+','+height/2+')')
						
						path = svg.selectAll("path")
						   .data(pie(data))
						   .enter()
						   .append('path')
						   .attr('d',function(d){return arc(d)})
						   .style('fill',function(d,i){return colors[i]})
						   .style('stroke','black')
						   .each(function(d) { this._current = d; });

						path.on("click",chart.click);

					})
				}
				chart.data = function(value){

					if(!arguments.length) return data;
					data = value;
					if(typeof updateData === 'function') updateData();
					return chart;
				}

				chart.click = function(value){
					index = this.__data__.index
			        var rotate = 0-(value.startAngle + value.endAngle)/2 / Math.PI * 180;
										    
			        // Transition the pie chart
			        d3.select(this.parentNode).transition()
			           .attr("transform", "translate("+width/2+","+height/2+") rotate(" + rotate + ")")
			           .duration(1000);
				}
				return chart
			}
			data = [1,5,8];
			var piechart1 = piechart(1).data(data);
			d3.select('#chart1').call(piechart1);
			var piechart2 = piechart(2).data(data);
			d3.select('#chart2').call(piechart2);
<html>
	<head>
		<script src="https://d3js.org/d3.v4.min.js"></script>
		<script src="https://d3js.org/d3-path.v1.min.js"></script>
		<script src="https://d3js.org/d3-shape.v1.min.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<style>
			body{
				height: 100%;
				width: 100%;
				/*background-image: url("Computer.png");*/
			}
			p{
				float:left;
			}
		</style>
	</head>
	<!-- <img src=Computer.png width="70%" height="100%"> -->
	<p id="chart1"></p>
	<p id="chart2"></p>

	<body >

	</body>
</html>

https://jsfiddle.net/rL96uv4g/

希望这有帮助。

关于javascript - 为什么 d3.js 可重复图表上的单击事件创建问题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53960171/

24 4 0
文章推荐： javascript - 如何防止 Dragleave 干扰嵌套 dropzone 元素上的 Dragenter 事件？
文章推荐： javascript - Angular Material 树 - 样式可能性
文章推荐： javascript - Mongoose 复杂种群
文章推荐： clojure - 在 clojure 中如何定义 defmacro 本身？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com