jquery функция щелчка на узле d3. js

Question

Я хочу использовать jQuery для обработки щелчка мышью по узлам в сетевом графе с направленной силой. Таким образом, я могу выполнить AJAX вызовы на странице PHP, которая извлекает данные об этом узле с помощью запроса mySQL.

Но я борюсь за то, как интегрировать d3. js с jQuery. Я попробовал это (см. jQuery после события // click), но неудивительно, что он не работает, потому что «узел» явно не является правильным идентификатором. Когда я использую теги HTML div, это легко, но с d3. js Я не уверен, какой эквивалентный идентификатор использовать.

Спасибо, Том

<script type="text/javascript">

    //click event

$("node").click(function(){
  alert("The node was clicked.");
});



    //Set margins and sizes
    var margin = {
        top: 20,
        bottom: 50,
        right: 30,
        left: 50
    };
    var width = 1920 - margin.left - margin.right;
    var height = 1080 - margin.top - margin.bottom;
    //Load Color Scale
    var c10 = d3.scale.category10();
    //Create an SVG element and append it to the DOM
    var svgElement = d3.select("body")
                        .append("svg").attr({"width": width+margin.left+margin.right, "height": height+margin.top+margin.bottom})
                        .append("g")
                        .attr("transform","translate("+margin.left+","+margin.top+")"); 
    //Load External Data
    d3.json("php/index_network_methy.php", function(dataset){
        //Extract data from dataset
        var nodes = dataset.nodes,
            links = dataset.links;
        //Create Force Layout
        var force = d3.layout.force()
                        .size([width, height])
                        .nodes(nodes)
                        .links(links)
                        .gravity(0.1)
                        .charge(-200)
                        .linkDistance(100);
        //Add links to SVG
        var link = svgElement.selectAll(".link")
                    .data(links)
                    .enter()
                    .append("line")
                    .attr("stroke-width", function(d){ return d.weight/1; })
                    .attr("class", "link");
        //Add nodes to SVG
        var node = svgElement.selectAll(".node")
                    .data(nodes)
                    .enter()
                    .append("g")
                    .attr("class", "node")
                    .call(force.drag);
        //Add labels to each node
        var label = node.append("text")
                        .attr("dx", 24)
                        .attr("dy", "0.35em")
                        .attr("font-size", function(d){ return d.influence*1.5>9? d.influence*1.5: 9; })
                        .text(function(d){ return d.character; });
        //Add circles to each node
        var circle = node.append("circle")
                        .attr("r", function(d){ return d.influence/2>15 ? d.influence/2 : 15; })
                        .attr("fill", function(d){ return c10(d.zone*10); });
        //This function will be executed for every tick of force layout 
        force.on("tick", function(){
            //Set X and Y of node
            node.attr("r", function(d){ return d.influence; })
                .attr("cx", function(d){ return d.x; })
                .attr("cy", function(d){ return d.y; });
            //Set X, Y of link
            link.attr("x1", function(d){ return d.source.x; })
            link.attr("y1", function(d){ return d.source.y; })
            link.attr("x2", function(d){ return d.target.x; })
            link.attr("y2", function(d){ return d.target.y; });
            //Shift node a little
            node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
        });
        //Start the force layout calculation
        force.start();
    });
    </script>

Answer 1

Ваше объявление слушателя $("node").click не ссылается ни на один элемент

node не является элементом.

У вас есть элементы с классом node, поэтому ваше объявление jquery должно быть

$('.node').click... //  (note the dot)

Если это не сработает, скорее всего, потому что вы подключаете слушателя до того, как элементы в дом.

Хорошим подходом для d3 является добавление обычного javascript слушателя при добавлении узла. Смотрите d3 обработки событий