How to Invoke "Click" Event Programmatically in D3

How to externally trigger d3 events

If you are already on D3 v4, you can use selection.dispatch() which was specifically designed to do exactly what you are looking for:

# selection.dispatch(type[, parameters]) <>
Dispatches a custom event of the specified type to each selected element, in order.

This was included in v4 as a result of the issue "Ability to trigger event handlers manually. #100".

Furthermore, the method will enable you to dispatch events of the same type to all elements contained in the selection. The implementation of that method looks similar to the approach the other answerers took by putting event.dispatch() to use, but will make your life somewhat easier. The following snippet has a listener for each individual circle, which may all be triggered by the button at once.

var circles = d3.select("svg").selectAll("circle")
  .data(d3.range(5))
  .enter().append("circle")
    .attr("cx", function(d, i) { return 60 * i + 20; })
    .attr("cy", "30")
    .attr("r", "20").attr("fill", "blue")
    .on("mouseleave",function(){
      d3.select(this)
        .attr("fill", "red")
        .transition().duration(1000)
        .attr("fill", "blue");
    });

d3.select("#btn")
  .on("click", function() {
    circles.dispatch("mouseleave");
  });

<script src="https://d3js.org/d3.v4.js"></script>
<svg width="400" height="70"></svg>

<button id="btn">Dispatch mouseleave to all circles</button>

programmatically access a d3 rectangle on click event

The on-click event function can be accessed by using the following:

testing.__onclick();

How to programmatically trigger a D3 drag event?

Save the callback (the one you pass into the drag handler) in a variable and then call this variable in your other context.

var dragCallback = function(){
    console.log(d3.event.dx, d3.event.dy);
};
var dragBehavior = d3.behavior.drag()
    .on("drag", dragCallback);
myNodes.enter()
    .append("g")
    .call(dragBehavior);
    //Call drag method programmatically
dragCallback()

How can I simulate a click on d3 tree nodes?

You can simulate click event with following function:

function simulateClick(elem /* Must be the element, not d3 selection */) {
    var evt = document.createEvent("MouseEvents");
    evt.initMouseEvent(
        "click", /* type */
        true, /* canBubble */
        true, /* cancelable */
        window, /* view */
        0, /* detail */
        0, /* screenX */
        0, /* screenY */
        0, /* clientX */
        0, /* clientY */
        false, /* ctrlKey */
        false, /* altKey */
        false, /* shiftKey */
        false, /* metaKey */
        0, /* button */
        null); /* relatedTarget */
    elem.dispatchEvent(evt);
}

Demo @ JsFiddle: http://jsfiddle.net/ur5rx/1/

Relevant Docs @ Mozilla Developer Network

Creating and triggering events
event.initMouseEvent
EventTarget.dispatchEvent

D3js setting fill to none programmatically impacts onClick Event

You need to adjust the pointer-events property so that your unfilled shapes still react to mouse clicks. It sounds like

 pointer-events: visible;

is probably what you want here.