Зачем щелкать событие по проблеме создания диаграммы d3.js? - PullRequest
Новая
       1

Зачем щелкать событие по проблеме создания диаграммы d3.js?

0 голосов
/ 28 декабря 2018

Я использовал схему многоразовых графиков, описанную Майком Бостоком.Я сталкиваюсь с одной проблемой.

Функциональность круговой диаграммы : -
1. Когда я нажимаю на вкладку круговой диаграммы, она должна вращаться и помещать цвет, который я щелкнула, сверху.

Задача : -
1. Когда я нажимаю на первом графике.Функциональность реализована, но реализована на 2-м графике.

Я думаю, что проблема связана с глобальной декларацией.Но я ничего не объявил глобально.

Пожалуйста, кто-нибудь, помогите мне с этой довольно простой задачей.

Это моя js fiddle ссылка, где вы можете проверить эту анамолию.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>

1 Ответ

0 голосов
/ 28 декабря 2018

Когда вы переходите / преобразуете элемент <g>, который является родительским для path s, на которые вы щелкаете, вы можете просто использовать this.parentNode для его преобразования.

Например, вобработчик click, измените следующее: 

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

на 

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

Хотя я бы посоветовал вам назначить идентификатор для каждой из диаграмм, чтобы выделить их в случаелогику диаграммы многократного использования и используйте этот вновь созданный идентификатор для всех других функций вместо зависимости от глобальных переменных.Например: 

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

и назначьте его следующим образом: 

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

Вот фрагмент кода с последующей вилкой скрипки: 

			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/

Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...