d3.js：非常簡單的鼠標交互

Question

我不想用鼠標交互做一個非常簡單的圖表。

例（進展）在這個頁面上：http://velo70.ouvaton.org/2013/gpxvtt-un-nouveau-plugin/

的目標是：當你改變滑塊位置，一圈有圖表上的同一位置。在地圖上，它已經完成:)

最好的問題可能是：當您移動幻燈片，圓圖移動，並且當您在圖表上移動圓圈時，幻燈片也會移動...但也許對我來說太難了：\

任何與教程的鏈接，以進步？

謝謝。

Answer 1

一種方法是將圓圈綁定到圖形中的每個數據點，然後將display：none設置爲除了與活動滑塊位置相對應的所有對象。

添加的圈子，那麼追加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"}); 

我認爲應該工作。

Answer 2

謝謝。對我來說好和教學方式:)

我最後用

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）的使用：\

測試中http://velo70.ouvaton.org/2013/gpxvtt-un-nouveau-plugin/

Answer 3

這是有點晚了..但我需要參加點.. :)

對於簡單的手柄點擊鼠標和通話功能的事件，我給你一個完整的文件與d3.js簡單的功能鏈接..

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

和「」文件包括（主要是分析它的'上'）：

$(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 //