Нужна помощь в D3 Sankey Chart

Question

У меня было требование, в котором пользователь будет щелкнуть по области диаграммы sankey и перетащить мышь на разные узлы Sankey Chart, и все узлы, которые попадают под выбранную область, должны показать свои имена ниже в другом div тег .

Любые идеи, как это можно достичь?

Эта ссылка может помочь: How to make nodes in sankey diagram clickable using d3.js library

var node = svg.append("g").selectAll(".node") 
     .data(graph.nodes) 
    .enter().append("g") 
     .attr("class", "node") 
     .attr("transform", function(d) { 
      return "translate(" + d.x + "," + d.y + ")"; }) 
    .on("click",function(d){ 
     if (d3.event.defaultPrevented) return; 
     alert("clicked!"+d.value); 
    }) 
    .call(d3.behavior.drag() 
     .origin(function(d) { return d; }) 
     .on("dragstart", function() { 
      this.parentNode.appendChild(this); }) 
     .on("drag", dragmove)); 

Мой код до сих пор:

Я просто хочу, чтобы захватить все имя узла, на котором потащил мышь (мыши вниз -> перетащить через Санки график, чтобы определить область -> мыши вверх):

var margin = {top: 1, right: 1, bottom: 6, left: 1}, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

var formatNumber = d3.format(",.0f"), //decimal places 
    format = function(d) { return formatNumber(d) + " TWh"; }, 
    color = d3.scale.category20(); 

var svg = d3.select("#chart").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

var sankey = d3.sankey() 
    .nodeWidth(15) 
    .nodePadding(10) 
    .size([width, height]); 

var path = sankey.link(); 

//d3.json("energy.json", function(energy) { 


d3.json("numbers-subset.json", function(energy) { 



    sankey 
     .nodes(energy.nodes) 
     .links(energy.links) 
     .layout(32); 

    var link = svg.append("g").selectAll(".link") 
     .data(energy.links) 
    .enter().append("path") 
     .attr("class", "link") 
     .attr("d", path) 
     .style("stroke-width", function(d) { return Math.max(1, d.dy); }) 
     .sort(function(a, b) { return b.dy - a.dy; }); 


    link.append("title") 
     .text(function(d) { return d.source.name + " → " + d.target.name + "\n" + format(d.value); }); 


    var node = svg.append("g").selectAll(".node") 
     .data(energy.nodes) 
    .enter().append("g") 
     .attr("class", "node") 
     .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }) 
    .call(d3.behavior.drag() 
     .origin(function(d) { return d; }) 
     .on("dragstart", function() { this.parentNode.appendChild(this); }) 
     .on("drag", dragmove)); 

    node.append("rect") 
     .attr("height", function(d) { return d.dy; }) 
     .attr("width", sankey.nodeWidth()) 
     .style("fill", function(d) { return d.color = color(d.name.split("|")[0]); }) 
     .style("stroke", function(d) { return d3.rgb(d.color).darker(2); }) 
    .append("title") 
     .text(function(d) { return d.name + "\n" + format(d.value); }); 

    node.append("text") 
     .attr("x", -6) 
     .attr("y", function(d) { return d.dy/2; }) 
     .attr("dy", ".35em") 
     .attr("text-anchor", "end") 
     .attr("transform", null) 
     .text(function(d) { return d.name; }) 
    .filter(function(d) { return d.x < width/2; }) 
     .attr("x", 6 + sankey.nodeWidth()) 
     .attr("text-anchor", "start"); 

    function dragmove(d) { 
    d3.select(this).attr("transform", "translate(" + d.x + "," + (d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))) + ")"); 
    sankey.relayout(); 
    link.attr("d", path); 
    } 



}); 

</script> 

Answer 1

Это называется кисти в d3.js.

Вы должны зарегистрировать brush объект, который заботится о вычислении «Brushed» AREA (доступ к нему через brush.extend), и к которым можно связать события (начало кисти, кисти, кисти конец), чтобы обновить чертеж соответственно ,

См документация и примеры на https://github.com/mbostock/d3/wiki/SVG-Controls