Невозможно добавить направляющую на график рассеяния в d3 v4 - PullRequest
Новая
       29

Невозможно добавить направляющую на график рассеяния в d3 v4

0 голосов
/ 12 февраля 2019

Я построил точечный график в d3 v4, используя следующую ссылку: точечный график

Я также использовал типичный плагин для всплывающей подсказки.

Теперь я хотел добавитьруководящие указания в этой таблице, которые показывают руководство, когда пользователь наводит курсор на круг, и скрывают рекомендации, когда они не в фокусе.Для этого я наткнулся на код, который я пытался использовать, но он ничего не показывает.

Ниже приведен код, который я использовал: 

var circles = svg.selectAll("circle").data(dataset).enter().append("circle");
              circles.attr("cx",function(d){
                    return xScale(d[indicator1]);//i*(width/dataset.length);
                    })
              .attr("cy",function(d){
                return yScale(d[indicator2]);
              })//for bottom to top
              .attr("r", 10);
              circles.attr("fill",function(d){
                return "#469DDA";
              });
              circles.attr("stroke",function(d){
                return "white";
              });
              circles.attr("class", "circles"); 
              svg.style('pointer-events', 'all')
               // what to do when we mouse over a bubble
              var mouseOn = function() { 
                var circle = d3.select(this);
                // transition to increase size/opacity of bubble
                circle.transition()
                .duration(800).style("opacity", 1)
                .attr("r", 16).ease("elastic");
                // append lines to bubbles that will be used to show the precise data points.
                // translate their location based on margins

                svg.append("g")
                  .attr("class", "guide")
                .append("line")
                  .attr("x1", circle.attr("cx"))
                  .attr("x2", circle.attr("cx"))
                  .attr("y1", +circle.attr("cy") + 26)
                  .attr("y2", h - margin.t - margin.b)
                  .attr("transform", "translate(40,20)")
                  .style("stroke", "#ccc")
                  .transition().delay(200).duration(400).styleTween("opacity", 
                        function() { return d3.interpolate(0, .5); })
                svg.append("g")
                  .attr("class", "guide")
                .append("line")
                  .attr("x1", +circle.attr("cx") - 16)
                  .attr("x2", 0)
                  .attr("y1", circle.attr("cy"))
                  .attr("y2", circle.attr("cy"))
                  .attr("transform", "translate(40,30)")
                  .style("stroke", "#ccc")
                  .transition().delay(200).duration(400).styleTween("opacity", 
                        function() { return d3.interpolate(0, .5); });
                // function to move mouseover item to front of SVG stage, in case
                // another bubble overlaps it
               /* d3.selection.prototype.moveToFront = function() { 
                  return this.each(function() { 
                  this.parentNode.appendChild(this); 
                  }); 
                };
               // skip this functionality for IE9, which doesn't like it
                if (!$.browser.msie) {
                  circle.moveToFront(); 
                }*/
              };
               // what happens when we leave a bubble?
              var mouseOff = function() {
                var circle = d3.select(this);

                // go back to original size and opacity
                circle.transition()
                .duration(800).style("opacity", 1)
                .attr("r", 10).ease("elastic");

                // fade out guide lines, then remove them
                d3.selectAll(".guide").transition().duration(100).styleTween("opacity", 
                        function() { return d3.interpolate(.5, 0); })
                  .remove()
              }; 
               // run the mouseon/out functions
              circles.on("mouseover", mouseOn);
              circles.on("mouseout", mouseOff);
              $('.circles').tipsy({ 
                gravity: 'w', 
                html: true, 
                title: function() {
                  var d = this.__data__;
                  return "State: "+d.States+"<br>"+indicator1+" "+d[indicator1]+"<br>"+indicator2+" "+d[indicator2]; 
                }
              });

Теперь я получаю следующий результат:

scatter plot

Когда я проверял консоль браузера, я получаю следующую ошибку:

error

1 Ответ

0 голосов
/ 13 февраля 2019

Если вы используете d3.v4, я думаю, что проблема заключается в методе облегчения перехода

Вы должны предоставить константу замедления вместо простой строки

Так, вместо использования 

circle.transition()
                    .duration(800).style("opacity", 1)
                    .attr("r", 16).ease("elastic");

Вы должны написать 

circle.transition()
                    .duration(800).style("opacity", 1)
                    .attr("r", 16).ease(d3.easeElastic) // change
...