Charts d3.js：非常简单的鼠标交互

我不想做一个非常简单的鼠标交互图表

示例（正在进行的工作）见本页：

目标是：更改滑块位置时，圆在图表上的位置相同。在地图上，已经完成了：）

最好的问题可能是：当你移动幻灯片时，圆圈图表移动，当你移动图表上的圆圈时，幻灯片也移动。。。但对我来说可能太难了：\

有任何与教程的链接可以继续吗

---

谢谢。

一种方法是将圆绑定到图形中的每个数据点，然后将显示设置为：除与活动滑块位置对应的数据点外，其余均为“无”

在附加path.lineSup后添加圆：

chart.selectAll("circle.highlightPoint")
    .data(data)
            .enter()
            .append("circle")
    .attr("class", "highlightPoint")
    .attr("fill", "pink")
    .attr("cx", function(d) { return x(d.dist); })
        .attr("cy", function(d) { return y(d.ele); })
            .attr("display", "none");

添加到滑块功能：

    d3.selectAll("circle.highlightPoint")
            .attr("display", function(d,i) { return i == id ? "block" : "none"});

---

我想那应该行。

谢谢。对我来说，这是一个很好的教学方法：）

我终于测试了一下

chart.append("circle")
    .data(data)
    .attr("class", "highlightPoint")
    .attr("r",4)
    .attr("innerRadius",0)
    .style("fill", "pink")
    .style("stroke","blue")
    .style("stroke-width",1)
    .attr("cx", function(d) { return x(d.dist); })
    .attr("cy", function(d) { return y(d.ele); })
    .attr("display","block") ;

但它只显示第一个圆。 我不太理解函数（d）和函数（d，I）的用法：\

---

考试时间有点晚了。。但我需要参与点：）

对于事件上的简单句柄单击鼠标并调用函数，我提供了一个完整的文件来链接d3.js的简单函数

<script src="js/file.js"></script>

以及要包括的“文件”（主要分析其“on”）：

$（函数（）{
//调用了.ready（）的处理程序。
var数据=[]，
宽度=300，
高度=300，
//保存坐标的数组
//在每个svg上绘制的线的长度。
坐标=[]，
line=d3.svg.line（），
//设置每个零件的行为
//拖累的。
drag=d3.behavior.drag（）
.on（“dragstart”，函数（）{
//清空coords数组。
坐标=[]；
svg=d3。选择（此）；
//如果选择行已经存在，
//移除它。
//svg.select（“.selection”）.remove（）；
//添加新的选择行。
append（“path”）.attr（{“class”：“selection”}）；
})
.on（“拖动”，函数（）{
//存储鼠标的当前位置
coords.push（d3.mouse（this））；
svg=d3。选择（此）；
//更改选择行的路径
//表示鼠标所在的区域
//已经被拖走了。
svg.select（“.selection”）.attr({
d：线路（坐标）
});
//弄清楚哪些点在图中
//绘制路径并高亮显示它们。
选定=[]；
svg.selectAll（“circle.dot”）。每个（函数（d，i）{
点=[d3.select（this.attr（“cx”），d3.select（this.attr（“cy”）]；
if（点多边形（点，坐标））{
已选择。推送（d.id）；
}
});
突出显示（选定）；
})
.on（“dragend”，function（）{
svg=d3。选择（此）；
//如果用户单击而没有
//绘制路径时，删除任何路径
//这是以前画的。
if（coords.length==0）{
//d3.选择全部（“svg路径”）.remove（）；
不高光（）；
返回；
}
//在第一个点之间绘制路径
//最后一点，关闭路径。
svg.append（“line”）.attr({
“类”：“终结者”，
d:行（[coords[0]，coords[coords.length-1]）
});
});
函数随机点（）{
返回Math.floor（Math.random（）*（宽度-30））+20；
}
//从https://github.com/substack/point-in-polygon
函数pointInPolygon（点，vs）{
VI席，XJ，I，相交，
x=点[0]，
y=点[1]，
内=假；
对于（变量i=0，j=vs.length-1；iy）！=（yj>y））
&&（x<（xj-xi）*（y-yi）/（yj-yi）+xi）；
如果（相交）内部=！内部；
}
返回内部；
}
函数取消高亮（）{
d3.选择全部（“圆圈.点”）。分类（“突出显示”，假）；
}
功能突出显示（ids）{
//首先解除所有圆圈的照明。
不高光（）；
//查找具有id的圆
//在给定的ID数组中，以及
//突出这些。
d3.全选（“圆点”）.过滤器（功能（d，i）{
返回id.indexOf（d.id）>-1；
})
.分类（“突出显示”，正确）；
}
功能分散（数据、选择器、组）{
var svg=d3.select（选择器）.append（“svg”）
艾特先生({
宽度：宽度，
高度：高度
}).呼叫（拖动），
g=svg.append（“g”）.attr（{“class”：“g-dot”}），
//为每个元素创建一个圆元素
//传递的数据中的项。
圆点=g.selectAll（“圆点”）
.数据（数据）
.enter（）.append（“圆”）
艾特先生({
“类”：“点”，
r:8，
cx：功能（d，i）{
返回d[group].x；
},
cy：功能（d，i）{
返回d[group].y；
},
})
.on（“鼠标悬停”，功能（d，i）{
//突出显示鼠标上方的圆圈，但
//仅当尚未绘制路径时。
如果（d3.selectAll（“svg路径”）.empty（））{
突出显示（[d.id]）；
}
})
.on（“mouseout”，函数（d，i）{
//如果没有绘制路径，
//取消高亮显示的圆圈。
如果（d3.selectAll（“svg路径”）.empty（））{
不高光（）；
}
});
text=g.selectAll（“文本”）
.数据（数据）
$(function() {
// Handler for .ready() called.

var data = [],

  width = 300,
  height = 300,

  // An array to hold the coordinates
  // of the line drawn on each svg.
  coords = [],

  line = d3.svg.line(),

  // Set the behavior for each part
  // of the drag.
  drag = d3.behavior.drag()
              .on("dragstart", function() {
                // Empty the coords array.
                coords = [];
                svg = d3.select(this);

                // If a selection line already exists,
                // remove it.
                //svg.select(".selection").remove();

                // Add a new selection line.
                svg.append("path").attr({"class": "selection"});
              })
              .on("drag", function() {
                // Store the mouse's current position
                coords.push(d3.mouse(this));

                svg = d3.select(this);

                // Change the path of the selection line
                // to represent the area where the mouse
                // has been dragged.
                svg.select(".selection").attr({
                  d: line(coords)
                });

                // Figure out which dots are inside the
                // drawn path and highlight them.
                selected = [];
                svg.selectAll("circle.dot").each(function(d, i) {
                  point = [d3.select(this).attr("cx"), d3.select(this).attr("cy")];
                  if (pointInPolygon(point, coords)) {
                    selected.push(d.id);
                  }
                });
                highlight(selected);
              })
              .on("dragend", function() {
                svg = d3.select(this);
                // If the user clicks without having
                // drawn a path, remove any paths
                // that were drawn previously.
                if (coords.length === 0) {
                 // d3.selectAll("svg path").remove();
                  unhighlight();
                  return;
                }

                // Draw a path between the first point
                // and the last point, to close the path.
                svg.append("line").attr({
                  "class": "terminator",
                  d: line([coords[0], coords[coords.length-1]])
                });
              });


  function randomPoint() {
     return Math.floor(Math.random()*(width-30)) + 20;
  }

  // from https://github.com/substack/point-in-polygon
  function pointInPolygon (point, vs) {
     var xi, xj, i, intersect,
        x = point[0],
        y = point[1],
        inside = false;
    for (var i = 0, j = vs.length - 1; i < vs.length; j = i++) {
      xi = vs[i][0],
      yi = vs[i][1],
      xj = vs[j][0],
     yj = vs[j][1],
      intersect = ((yi > y) != (yj > y))
         && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
      if (intersect) inside = !inside;
   }
   return inside;
  }

 function unhighlight() {
   d3.selectAll("circle.dot").classed("highlighted", false);
  }

  function highlight(ids) {
    // First unhighlight all the circles.
   unhighlight();

   // Find the circles that have an id
   // in the array of ids given, and 
   // highlight those.
    d3.selectAll("circle.dot").filter(function(d, i) {
     return ids.indexOf(d.id) > -1;
   })
   .classed("highlighted", true);
 }

 function Scatter(data, selector, group) {
   var svg = d3.select(selector).append("svg")
               .attr({
                 width: width,
                 height: height
               }).call(drag),

       g = svg.append("g").attr({"class": "g-dot"}),

       // Create a circle element for each
       // item in the data passed.
     dot = g.selectAll("circle.dot")
                  .data(data)
                .enter().append("circle")
                 .attr({
                   "class": "dot",
                   r: 8,
                   cx: function(d, i) {
                     return d[group].x;
                  },
                cy: function(d, i) {
                  return d[group].y;
                },
              })
              .on("mouseover", function(d, i) {
                // Highlight circles on mouseover, but
                // only if a path hasn't been drawn.
                if (d3.selectAll("svg path").empty()) {
                  highlight([d.id]);
                }
              })
              .on("mouseout", function(d, i) {
                // If a path hasn't been drawn,
                // unhighlight the highlighted circles.
                if (d3.selectAll("svg path").empty()) {
                  unhighlight();
                }
              });

    text = g.selectAll("text")
              .data(data)
            .enter().append("text")
              .attr({
                x: function(d, i) {
                  return d[group].x;
                },
                y: function(d, i) {
                  return d[group].y + 4;
                }
              })
              .text(function(d, i) {
                return d.id;
              });
  }

  // Add the dots to each canvas div.
  Scatter(data, "#tableau_principal", "a");
  Scatter(data, "#canvas2", "b");
  Scatter(data, "#canvas3", "c");
}); // // FIN DOC READY //

 // functions generales used partt //