无法在 d3 v4 中为散点图添加指南

Question

我使用以下链接在 d3 v4 中构建了一个散点图：scatter plot

我也使用了tipsy插件作为工具提示。

现在我想在此图表中添加指南，当用户将鼠标悬停在一个圆圈上时显示指南，并在失焦时隐藏指南。为此，我偶然发现了一个我尝试使用但没有显示任何内容的代码。

以下是我使用的代码：

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]; 
                }
              });

我现在得到以下结果：

当我检查浏览器控制台时，我收到以下错误：

Answer 1

如果您使用的是 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