d3 - kích hoạt sự kiện di chuột

Question

Tôi có một bản đồ của các tiểu bang và các hạt của Hoa Kỳ trong đồ họa SVG được hiển thị bởi D3. Mỗi đường dẫn có mouseover, mouseout và các sự kiện nhấp chuột liên kết với nó, cũng như mã FIPS quận được đặt làm ID đường dẫn.

Tôi có đầu vào Tự động điền jQuery nơi người dùng có thể nhập tên của tiểu bang hoặc hạt. Cho rằng đầu vào, mà làm cho FIPS ID tương ứng có sẵn, làm thế nào tôi có thể kích hoạt sự kiện mouseover programatically?

Answer 1

Cấu trúc javascript của bạn sao cho sự kiện di chuột gọi hàm javascript và sau đó bạn có thể gọi cùng chức năng đó bất cứ khi nào bạn muốn.

Answer 2

Tôi đã tìm ra câu trả lời. Vấn đề chính là D3 không có hàm trigger rõ ràng như jQuery. Tuy nhiên, bạn có thể mô phỏng nó.

Giả sử bạn có một con đường D3 được xây dựng qua

d3.json("us-counties.json", function(json){ 

    thisObj._svg.selectAll("path") 
    .data(json.features) 
    .enter().append("path") 
    .attr("d", thisObj._path) 
    .attr("class", "states") 
    .attr("id", function(d){ 
     return d.id; //<-- Sets the ID of this county to the path 
    }) 
    .style("fill", "gray") 
    .style("stroke", "black") 
    .style("stroke-width", "0.5px") 
    .on("dblclick", mapZoom) 
    .on("mouseover", mapMouseOver) 
    .on("mouseout", mapMouseOut); 
}); 

và xử lý sự kiện mouseover rằng những thay đổi điền và đột quỵ màu

var mapMouseOver(d){ 

    d3.selectAll($("#" + d.id)) 
    .style("fill", "red") 
    .style("stroke", "blue"); 

} 

Thông thường, hầu hết các hướng dẫn nói để sử dụng

d3.select(this)... 

nhưng thực sự sử dụng giá trị hoạt động là tốt. Nếu bạn có một xử lý sự kiện mà được bạn ID của nút, và kích hoạt nó thông qua

$("#someDropdownSelect").change(someEventHandler) 

function someEventHandler(){ 

    //get node ID value, sample 
    var key = $(this) 
       .children(":selected") 
       .val(); 

    //trigger mouseover event handler 
    mapMouseOver({id : key}); 

} 

sẽ thực hiện sự kiện mouseover dựa trên sự lựa chọn thả xuống

Answer 3

Bạn có thể đạt được điều này bằng cách trực tiếp cử các sự kiện trên phần tử mong muốn:

var event = document.createEvent('SVGEvents'); 
event.initEvent(eventName,true,true); 
element.dispatchEvent(event); 

Xem chi tiết hơn trong này blog post

Answer 4

giải pháp

Steve Greatrex của làm việc cho tôi cho đến khi iOS 9, nhưng không phải trên iOS 10.

Sau khi gỡ lỗi mã của tôi và một số nghiên cứu có vẻ như vấn đề là các hàm createEvent và initEvent không được chấp nhận theo điều này documentation.

Các phương pháp mới để viết những dòng này là:

var event = new MouseEvent('SVGEvents', {}); 
element.dispatchEvent(event); 

Nhiều lời giải thích về các phương pháp mới để tạo và kích hoạt các sự kiện với nhà thầu sự kiện có thể được tìm thấy here.