如何使sankey圖中的節點可點擊使用d3.js庫

Question

代碼片段： 我們正在使用d3.js。 Sankey圖由節點和鏈接組成。 這裏的數據來自json文件。 那麼如何讓所有的節點可點擊。 我們可以在矩形中使用哪些方法，以便我們可以使節點可點擊。

<script> 

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是非常強大的庫，讓您控制每個事件對每個像素。 但我們需要在事件中做一件事。 重疊的事件，我們需要忘記。

在代碼中添加以下代碼。

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));