मैं एक डी3 सैंकी चार्ट पर काम कर रहा हूं जो 2 समय अवधि में नोड्स के बीच वॉल्यूम की गति को दर्शाता है। मेरे नोड्स रंग समन्वित हैं (उनके नाम के आधार पर)। मैंने केवल साधारण सीएसएस का उपयोग करके अपने लिंक पर होवर व्यवहार स्थापित करने में कामयाब रहा है, लेकिन आदर्श रूप से मुझे बाईं ओर एक नोड पर होवर करने में सक्षम होना चाहिए और फिर उस नोड से आने वाले सभी लिंक हाइलाइट किए जाते हैं। इसी तरह, आपको दाहिनी ओर संबंधित नोड पर होवर करने और उस नोड में जाने वाले सभी लिंक को हाइलाइट करने में सक्षम होना चाहिए।

यह मेरा अब तक का कोड है। कोई भी सहायताकाफी प्रशंसनीय होगी:

// set the dimensions and margins of the graph
var margin = {
    top: 75,
    right: 10,
    bottom: 10,
    left: 10
  },
  width = 900 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

// append the svg object to the body of the page
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 + ")");

//Color scale used
var color = d3.scaleOrdinal().range(["#002060ff", "#164490ff", "#4d75bcff", "#98b3e6ff", "#d5e2feff", "#008cb0ff"]);


// Set the sankey diagram properties
var sankey = d3.sankey()
  .nodeWidth(175)
  .nodePadding(10)
  .size([width, height]);

// load the data

var data = {
  "years": [{
      "year": 2019
    }, {
      "year": 2020
    }

  ],
  "nodes": [{
      "node": 0,
      "id": "a",
      "name": "A"
    },
    {
      "node": 1,
      "id": "b",
      "name": "B"
    },
    {
      "node": 2,
      "id": "c",
      "name": "C"
    },
    {
      "node": 3,
      "id": "d",
      "name": "D"
    },
    {
      "node": 4,
      "id": "e",
      "name": "E"
    },
    {
      "node": 5,
      "id": "f",
      "name": "F"
    },
    {
      "node": 6,
      "id": "a",
      "name": "A"
    },
    {
      "node": 7,
      "id": "b",
      "name": "B"
    },
    {
      "node": 8,
      "id": "c",
      "name": "C"
    },
    {
      "node": 9,
      "id": "d",
      "name": "D"
    },
    {
      "node": 10,
      "id": "e",
      "name": "E"
    },
    {
      "node": 11,
      "id": "f",
      "name": "F"
    }
  ],
  "links": [{
      "source": 0,
      "target": 6,
      "value": 20
    },
    {
      "source": 0,
      "target": 7,
      "value": 10
    },
    {
      "source": 0,
      "target": 8,
      "value": 10
    },
    {
      "source": 0,
      "target": 9,
      "value": 10
    },
    {
      "source": 0,
      "target": 10,
      "value": 20
    },
    {
      "source": 0,
      "target": 11,
      "value": 10
    },

    {
      "source": 1,
      "target": 6,
      "value": 40
    },
    {
      "source": 1,
      "target": 7,
      "value": 10
    },
    {
      "source": 1,
      "target": 8,
      "value": 10
    },
    {
      "source": 1,
      "target": 9,
      "value": 10
    },
    {
      "source": 1,
      "target": 10,
      "value": 10
    },
    {
      "source": 1,
      "target": 11,
      "value": 10
    },

    {
      "source": 2,
      "target": 6,
      "value": 20
    },
    {
      "source": 2,
      "target": 7,
      "value": 10
    },
    {
      "source": 2,
      "target": 8,
      "value": 10
    },
    {
      "source": 2,
      "target": 9,
      "value": 10
    },
    {
      "source": 2,
      "target": 10,
      "value": 10
    },
    {
      "source": 2,
      "target": 11,
      "value": 10
    },

    {
      "source": 3,
      "target": 6,
      "value": 20
    },
    {
      "source": 3,
      "target": 7,
      "value": 10
    },
    {
      "source": 3,
      "target": 8,
      "value": 10
    },
    {
      "source": 3,
      "target": 9,
      "value": 10
    },
    {
      "source": 3,
      "target": 10,
      "value": 10
    },
    {
      "source": 3,
      "target": 11,
      "value": 10
    },

    {
      "source": 4,
      "target": 6,
      "value": 20
    },
    {
      "source": 4,
      "target": 7,
      "value": 10
    },
    {
      "source": 4,
      "target": 8,
      "value": 10
    },
    {
      "source": 4,
      "target": 9,
      "value": 10
    },
    {
      "source": 4,
      "target": 10,
      "value": 10
    },
    {
      "source": 4,
      "target": 11,
      "value": 10
    },

    {
      "source": 5,
      "target": 6,
      "value": 20
    },
    {
      "source": 5,
      "target": 7,
      "value": 10
    },
    {
      "source": 5,
      "target": 8,
      "value": 10
    },
    {
      "source": 5,
      "target": 9,
      "value": 10
    },
    {
      "source": 5,
      "target": 10,
      "value": 10
    },
    {
      "source": 5,
      "target": 11,
      "value": 10
    }


  ]
}

// Constructs a new Sankey
sankey
  .nodes(data.nodes)
  .links(data.links)
  .layout(0);

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


// add in the nodes
var node = svg.append("g")
  .selectAll(".node")
  .data(data.nodes)
  .enter().append("g")
  .attr("class", "node")
  .attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")";
  })


// add the rectangles for the nodes
node
  .append("rect")
  .attr("height", function(d) {
    return d.dy;
  })
  .attr("width", sankey.nodeWidth())
  .attr("rx", 3)
  .attr("ry", 3)
  .style("fill", function(d) {
    return d.color = color(d.id.replace(/ .*/, ""));
  })
  // Add hover text
  .append("title")
  .text(function(d) {
    return d.name + "\n" + d.value
  });

// add in the title for the nodes
node
  .append("text")
  .attr("x", 87)
  .attr("y", function(d) {
    return d.dy / 2;
  })
  .attr("dy", ".35em")
  .attr("text-anchor", "middle")
  .text(function(d) {
    return d.name;
  })
  .style("fill", "white")
@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@600&display=swap');
text {
  font-family: 'Assistant', sans-serif
}

text {
  font-size: 14px
}

.link {
  fill: none;
  stroke: #000;
  stroke-opacity: .2;
}

.link:hover {
  stroke-opacity: .5;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Assistant:wght@700&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/holtzy/D3-graph-gallery@master/LIB/sankey.js"></script>
<div id="chart"></div>
0
Ryan Bentham 19 अक्टूबर 2020, 16:02

1 उत्तर

सबसे बढ़िया उत्तर

D3 में इसका अपना इवेंट सिस्टम है, जो होवर, क्लिक, टच और कई और घटनाएँ। बहुत ही साधारण चीजों को छोड़कर, अक्सर CSS छद्म-वर्गों का उपयोग करने की आवश्यकता नहीं होती है।

// set the dimensions and margins of the graph
var margin = {
    top: 75,
    right: 10,
    bottom: 10,
    left: 10
  },
  width = 900 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

// append the svg object to the body of the page
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 + ")");

//Color scale used
var color = d3.scaleOrdinal().range(["#002060ff", "#164490ff", "#4d75bcff", "#98b3e6ff", "#d5e2feff", "#008cb0ff"]);


// Set the sankey diagram properties
var sankey = d3.sankey()
  .nodeWidth(175)
  .nodePadding(10)
  .size([width, height]);

// load the data

var data = {
  "years": [{
      "year": 2019
    }, {
      "year": 2020
    }

  ],
  "nodes": [{
      "node": 0,
      "id": "a",
      "name": "A"
    },
    {
      "node": 1,
      "id": "b",
      "name": "B"
    },
    {
      "node": 2,
      "id": "c",
      "name": "C"
    },
    {
      "node": 3,
      "id": "d",
      "name": "D"
    },
    {
      "node": 4,
      "id": "e",
      "name": "E"
    },
    {
      "node": 5,
      "id": "f",
      "name": "F"
    },
    {
      "node": 6,
      "id": "a",
      "name": "A"
    },
    {
      "node": 7,
      "id": "b",
      "name": "B"
    },
    {
      "node": 8,
      "id": "c",
      "name": "C"
    },
    {
      "node": 9,
      "id": "d",
      "name": "D"
    },
    {
      "node": 10,
      "id": "e",
      "name": "E"
    },
    {
      "node": 11,
      "id": "f",
      "name": "F"
    }
  ],
  "links": [{
      "source": 0,
      "target": 6,
      "value": 20
    },
    {
      "source": 0,
      "target": 7,
      "value": 10
    },
    {
      "source": 0,
      "target": 8,
      "value": 10
    },
    {
      "source": 0,
      "target": 9,
      "value": 10
    },
    {
      "source": 0,
      "target": 10,
      "value": 20
    },
    {
      "source": 0,
      "target": 11,
      "value": 10
    },

    {
      "source": 1,
      "target": 6,
      "value": 40
    },
    {
      "source": 1,
      "target": 7,
      "value": 10
    },
    {
      "source": 1,
      "target": 8,
      "value": 10
    },
    {
      "source": 1,
      "target": 9,
      "value": 10
    },
    {
      "source": 1,
      "target": 10,
      "value": 10
    },
    {
      "source": 1,
      "target": 11,
      "value": 10
    },

    {
      "source": 2,
      "target": 6,
      "value": 20
    },
    {
      "source": 2,
      "target": 7,
      "value": 10
    },
    {
      "source": 2,
      "target": 8,
      "value": 10
    },
    {
      "source": 2,
      "target": 9,
      "value": 10
    },
    {
      "source": 2,
      "target": 10,
      "value": 10
    },
    {
      "source": 2,
      "target": 11,
      "value": 10
    },

    {
      "source": 3,
      "target": 6,
      "value": 20
    },
    {
      "source": 3,
      "target": 7,
      "value": 10
    },
    {
      "source": 3,
      "target": 8,
      "value": 10
    },
    {
      "source": 3,
      "target": 9,
      "value": 10
    },
    {
      "source": 3,
      "target": 10,
      "value": 10
    },
    {
      "source": 3,
      "target": 11,
      "value": 10
    },

    {
      "source": 4,
      "target": 6,
      "value": 20
    },
    {
      "source": 4,
      "target": 7,
      "value": 10
    },
    {
      "source": 4,
      "target": 8,
      "value": 10
    },
    {
      "source": 4,
      "target": 9,
      "value": 10
    },
    {
      "source": 4,
      "target": 10,
      "value": 10
    },
    {
      "source": 4,
      "target": 11,
      "value": 10
    },

    {
      "source": 5,
      "target": 6,
      "value": 20
    },
    {
      "source": 5,
      "target": 7,
      "value": 10
    },
    {
      "source": 5,
      "target": 8,
      "value": 10
    },
    {
      "source": 5,
      "target": 9,
      "value": 10
    },
    {
      "source": 5,
      "target": 10,
      "value": 10
    },
    {
      "source": 5,
      "target": 11,
      "value": 10
    }
  ]
};

// Constructs a new Sankey
sankey
  .nodes(data.nodes)
  .links(data.links)
  .layout(0);

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

// add in the nodes
var node = svg.append("g")
  .selectAll(".node")
  .data(data.nodes)
  .enter().append("g")
  .attr("class", "node")
  .attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")";
  })

// add the rectangles for the nodes
node
  .append("rect")
  .attr("height", function(d) {
    return d.dy;
  })
  .attr("width", sankey.nodeWidth())
  .attr("rx", 3)
  .attr("ry", 3)
  .style("fill", function(d) {
    return d.color = color(d.id.replace(/ .*/, ""));
  })
  .on("mouseover", function(d) {
    link
      .transition()
      .duration(300)
      .style("stroke-opacity", function(l) {
        return l.source === d || l.target === d ? 0.5 : 0.2;
      });
  })
  .on("mouseleave", function(d) {
    link
      .transition()
      .duration(300)
      .style("stroke-opacity", 0.2);
  })
  // Add hover text
  .append("title")
  .text(function(d) {
    return d.name + "\n" + d.value
  });

// add in the title for the nodes
node
  .append("text")
  .attr("x", 87)
  .attr("y", function(d) {
    return d.dy / 2;
  })
  .attr("dy", ".35em")
  .attr("text-anchor", "middle")
  .text(function(d) {
    return d.name;
  })
  .style("fill", "white");
@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@600&display=swap');
text {
  font-family: 'Assistant', sans-serif
}

text {
  font-size: 14px
}

.link {
  fill: none;
  stroke: #000;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Assistant:wght@700&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/holtzy/D3-graph-gallery@master/LIB/sankey.js"></script>
<div id="chart"></div>
1
Ruben Helsloot 20 अक्टूबर 2020, 10:14